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

Question

Bootstrap全宽2种不同背景（和2列）这有点难以解释，这就是为什么我也找不到谷歌的答案。我正在使用Bootstrap 3，我需要一个全宽度的背景图像。在那2个透明的彩色背景之上。我做了一个示例图像，以使其清楚：1 + 2：组合透明色背景3 + 4：组合透明色背景1 + 2 + 3 + 4：组合背景图像（最低层）有谁知道这是否可能以及如何？谢谢你的帮助！

Answer 1

是的，使用此问题中概述的技术，但将其扩展到列。

Codepen演示（下面）显示的结果比包含的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);}[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>