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

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

我在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>

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

我的问题是文本背景的宽度溢出了图像 屏幕宽度和它创建一个水平滚动，我如何剪辑 这样我就不会有卷轴了

将容器包装在外包装中，并将其

overflow:hidden

，并将html和正文的边距设为零

HTML

---

我将此应用于您的，虽然它看起来与您发布的屏幕转储相去甚远

不清楚您在问什么。文本的背景宽度与创建水平滚动的屏幕宽度重叠，但我只希望背景与中心容器重叠，而不是与屏幕宽度重叠。如何剪裁？尝试删除背景：从您的CSS继承如果我这样做，背景正好在中央容器的边缘被切断，我希望它重叠，直到达到屏幕宽度的边缘，但不超过它。您能给我们一把小提琴吗？我们最好为您的问题提供一个解决方案problem@Twirlman不客气。。。请考虑接受我的回答。

.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;
}

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

html, body {
  margin: 0;
}

.wrapper {
  overflow: hidden;
}