Bootstrap全宽2种不同背景（和2列）

Question

Bootstrap全宽2种不同背景（和2列）

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

我正在使用Bootstrap 3，我需要一个全宽度的背景图像。在那2个透明的彩色背景之上。我做了一个示例图像，以使其清楚：

1 + 2：组合透明色背景

3 + 4：组合透明色背景

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

有谁知道这是否可能以及如何？谢谢你的帮助！

Answer 1

是的，使用此问题中概述的技术，但将其扩展到列。Codepen演示（下面）显示的结果比包含的Stack Snippet更好，以供参考。*&nbsp;{ &nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;box-sizing:&nbsp;border-box;}body&nbsp;{ &nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;/*&nbsp;prevent&nbsp;scrollbar&nbsp;*/}.container&nbsp;{ &nbsp;&nbsp;width:80%; &nbsp;&nbsp;margin:auto; &nbsp;&nbsp;margin-top:&nbsp;1em; &nbsp;&nbsp; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;overflow:&nbsp;visible;}.extra:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;''; &nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;/*&nbsp;override&nbsp;bootstrap&nbsp;*/ &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;left:&nbsp;50%; &nbsp;&nbsp;width:&nbsp;100vw; &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;transform:&nbsp;translate(-50%,&nbsp;0);}[class*="col"]&nbsp;{ &nbsp;&nbsp;border:&nbsp;2px&nbsp;solid&nbsp;grey; &nbsp;&nbsp;min-height:&nbsp;320px; &nbsp;&nbsp;position:&nbsp;relative;}.left:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;''; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;width:&nbsp;100vw; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;background:&nbsp;rgba(255,&nbsp;0,&nbsp;0,&nbsp;0.5)}.right:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;''; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;width:&nbsp;100vw; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;background:&nbsp;rgba(0,&nbsp;0,&nbsp;255,&nbsp;0.25);}<div&nbsp;class="container&nbsp;extra"> &nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-sm-4&nbsp;left"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-sm-8&nbsp;right"></div> &nbsp;&nbsp;</div></div>