如何使用 Bootstrap 3 创建具有透明颜色叠加的全宽背景？

带有透明颜色叠加的 Bootstrap 全宽背景

使用 Bootstrap 3 创建带有透明颜色叠加的全角背景图像可能看起来令人畏惧，但通过巧妙的技术是可能的。

要实现这一目标，您将结合使用绝对定位、伪元素和颜色叠加。

HTML 结构：

<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

CSS样式：

.container {
  width: 50%;
  margin: auto;
  margin-top: 1em;
  position: relative;
  overflow: visible;
}
.extra:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}
.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);
}

说明：

• .container 元素设置为特定宽度并以自动边距居中。
• 添加伪元素 .extra:before 将容器的宽度扩展到视口之外，创建全角背景的错觉。
• .col 元素被赋予实心边框以进行可视化。
• .left 和 .right 中的伪元素充当透明颜色叠加层，覆盖

此技术可以让您轻松地使用 Bootstrap 3 实现所需的背景和叠加效果。

以上是如何使用 Bootstrap 3 创建具有透明颜色叠加的全宽背景？的详细内容。更多信息请关注PHP中文网其他相关文章！