如何创建具有透明叠加层和多列的全宽 Bootstrap 背景？-css教程-PHP中文网

如何创建具有透明叠加层和多列的全宽 Bootstrap 背景？

Susan Sarandon

发布： 2024-12-17 13:15:25

原创

132 人浏览过

How to Create a Full-Width Bootstrap Background with Transparent Overlays and Multiple Columns?

具有透明颜色叠加和多列的全宽 Bootstrap 背景

在 Bootstrap 3 中，实现具有透明颜色叠加的全宽背景同时维护多个列可能是一个挑战。要解决此问题，您可以利用之前查询中概述的技术并将其扩展为合并列元素。

Codepen 示例中提供的代码演示有效地展示了实现。以下是供参考的相关代码片段：

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

登录后复制

.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);
}

[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);
}

登录后复制

这种方法涉及创建一个带有 'extra' 类的额外元素，作为整个布局的容器。在这个“额外”元素中，您将拥有具有“容器”类的主要内容容器。要将彩色覆盖层放置在列的顶部，您可以在“左”和“右”列类上使用“:before”伪元素，它允许您在元素的实际内容之前添加内容。通过将这些伪元素的宽度和高度设置为 100vw 和 100%，可以确保它们覆盖列的整个宽度和高度。最后，您可以使用“rgba()”函数指定透明颜色，其中最后一个值表示透明度级别（0 表示透明，1 表示完全不透明）。

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