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

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

  

我的问题是文本背景的宽度溢出了   屏幕宽度，它创建一个水平滚动，我如何剪辑   背景，所以我不会有滚动？

将您的容器包裹在外包装中并给它overflow: hidden并为您的html和正文提供零利润

HTML

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

CSS

html, body {
  margin: 0;
}

.wrapper {
  overflow: hidden;
}

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