css - 如何将伪背景颜色扩展到中心容器之外而不是屏幕宽度？

Question

大家好，我需要你的帮助，我正在尝试这种交替的图像和文本设计:

我在 Bootstrap 中对此进行编码，这是我的代码:

<div class="container">
    <div class="row">
        <div class="col-2"><img src="images/image.png" class="img1 img-responsive"></div>
        <div class="col-10"><h4 class="details blue right">Lorem Ipsum text here...</h4></div>
    </div>
    <div class="row">
        <div class="col-10"><h4 class="details green left">Lorem Ipsum text here...</h4></div>
        <div class="col-2"><img src="images/image.png" class="img2 img-responsive"></div>
    </div>
    <div class="row">
        <div class="col-2"><img src="images/image.png" class="img3 img-responsive"></div>
        <div class="col-10"><h4 class="details orange right">Lorem Ipsum text here...</h4></div>
    </div>
</div>

和我的 CSS:

.container{
    max-width:960px;
}

.details.left:before{
content:"";
position:absolute;
height:100%;
background:inherit;
width:100%;
top:0;
left:0;
z-index:0;
overflow:hidden;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}

我的问题是文本背景的宽度超出了屏幕宽度，它创建了一个水平滚动条，我该如何裁剪背景才不会有滚动条？我只希望背景与中心容器重叠而不是屏幕宽度。

Answer 1

My problem is the width of the text background is overflowing the screen width and it creates a horizontal scroll, how do i clip the background so i won't have the scroll?

将您的容器包裹在外层包装器中并给它 overflow: hidden 并给您的 html 和 body 一个零边距

HTML

<div class="wrapper">
  <div class="container">
  ....
  </div>
</div>

CSS

html, body {
  margin: 0;
}

.wrapper {
  overflow: hidden;
}

我将此应用于您的 fiddle demo here , 虽然它看起来离你发布的屏幕转储很远