Bootstrap全宽有2个不同的背景（和2列）
这有点难以解释，这就是为什么我也无法在Google上find答案。
我正在使用Bootstrap 3，我需要一个全宽的背景图像。 在2透明的颜色背景之上。 我做了一个例子，使之清楚：
1 + 2：组合透明色背景
3 + 4：组合透明色背景
1 + 2 + 3 + 4：组合背景图像（最低层）
有谁知道这是可能的，怎么样？ 谢谢你的帮助！
是的，使用这个问题中概述的技术，但将其扩展到列。
Codepen Demo（下面）显示了比Stack Snippet更好的结果，以供参考。
* { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; /* prevent scrollbar */ } .container { width:80%; margin:auto; margin-top: 1em; position: relative; overflow: visible; } .extra:before { content: ''; display: block; /* override bootstrap */ position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; transform: translate(-50%, 0); background-image: url(http://lorempixel.com/output/sports-qc-640-480-7.jpg); background-size: 50%; background-position: center; } [class*="col"] { border: 2px solid grey; min-height: 320px; position: relative; } .left:before { content: ''; position: absolute; height: 100%; width: 100vw; top: 0; right: 0; background: rgba(255, 0, 0, 0.5) } .right:before { content: ''; position: absolute; height: 100%; width: 100vw; top: 0; left: 0; background: rgba(0, 0, 255, 0.25); } <div class="container extra"> <div class="row"> <div class="col-sm-4 left"></div> <div class="col-sm-8 right"></div> </div> </div>
我想我明白了。感谢Paulie_D
很简单的例子：
HTML：
<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>
CSS：
.fullwidth { background: url('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); }
链接到jsfiddle： https ：//jsfiddle.net/DTcHh/14045/
