html - 具有 2 种不同背景(和 2 列)的 Bootstrap 全宽

Question

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

我正在使用 Bootstrap 3，我需要一张全宽背景图片。在那 2 个透明颜色背景之上。我做了一个示例图像来说明一切:

1+2:组合透明色背景

3+4:组合透明色背景

1+2+3+4:组合背景图(最底层)

有谁知道这是否可行以及如何实现？感谢您的帮助!

Answer 1

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

Codepen 演示(下方)显示的结果优于堆栈代码段，其中包含以供引用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  /* prevent scrollbar */
}
.container {
  width:50%;
  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: 120px;
  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>

Codepen Demo