Html 具有2个不同背景（和2列）的全宽引导

这有点难以解释，这就是为什么我在谷歌上也找不到答案

我正在使用Bootstrap3，我需要一个全宽背景图像。在这两个透明的颜色背景之上。我制作了一个示例图像来说明这一点：

1+2：组合透明色背景

3+4：组合透明色背景

1+2+3+4：组合背景图像（最底层）

---

有人知道这是否可能以及如何实现吗？谢谢你的帮助

我想我知道了。。多亏了保利

非常简单的例子：

HTML:

---

链接到jsfiddle:

是，使用本文概述的技术，但将其扩展到列

Codepen演示（如下）显示的结果比包含的堆栈片段更好，以供参考

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
溢出：隐藏；
/*防止滚动条*/
}
.集装箱{
宽度：50%；
保证金：自动；
边缘顶部：1米；
位置：相对位置；
溢出：可见；
}
1.额外：之前{
内容：''；
显示：块；
/*覆盖引导*/
位置：绝对位置；
排名：0；
左：50%；
宽度：100vw；
身高：100%；
转换：转换（-50%，0）；
}
[类别*=“列”]{
边框：2倍纯色灰色；
最小高度：120px；
位置：相对位置；
}
.左：以前{
内容：''；
位置：绝对位置；
身高：100%；
宽度：100vw；
排名：0；
右：0；
背景：rgba（255,0,0,0.5）
}
.对：以前{
内容：''；
位置：绝对位置；
身高：100%；
宽度：100vw；
排名：0；
左：0；
背景：rgba（0,0,255,0.25）；
}

<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
      <div class="row">
      <div class="col-sm-4 red20">xx</div>
      <div class="col-sm-8 red50">xx</div>
      </div>
  </div>
    <div class="cell red50">xxx</div>
</div>

.fullwidth {
  background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
    display:table;
    width:100%;
}
.cell{
    display:table-cell;
    vertical-align:top;
}

.red20{
    background-color:rgba(255,0,0,0.2);
}

.red50{
    background-color:rgba(255,0,0,0.5);
}