使用CSS :before伪元素为Bootstrap 4流体Jumbotron加遮罩致内容不可用的问题咨询

我之前踩过一模一样的坑！用:before伪元素加背景叠加层时，流体Jumbotron的内容和按钮被覆盖没法点击，核心问题是伪元素的层级没处理对，而且流体Jumbotron的布局特性让这个问题比普通版更明显。

正确的实现步骤 #

1. 先给Jumbotron设置基础的相对定位和背景图，这个你已经做了，没问题：

.jumbotron {
  position: relative;
  background: url('你的背景图地址') no-repeat center center;
  background-size: cover;
  /* 流体Jumbotron默认的左右padding不用动，伪元素会自动覆盖整个区域 */
}

2. 给:before伪元素设置叠加层样式，重点是把它的层级设得比内容低：

.jumbotron::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50%不透明度的深色叠加 */
  z-index: 1; /* 这个值要比内容层的z-index小 */
}

3. 给Jumbotron里的内容容器设置更高的层级，确保内容在叠加层之上：

.jumbotron .container {
  position: relative;
  z-index: 2; /* 比伪元素的z-index高，保证按钮、文字能正常交互 */
}

为什么之前的方法在流体版失效？ #

Bootstrap 4的流体Jumbotron（jumbotron-fluid）里的.container是直接贴合Jumbotron边缘的，如果你没给内容层设置position: relative和z-index，伪元素会因为是绝对定位且没有层级限制，直接覆盖整个Jumbotron区域（包括内容），导致按钮无法触发点击事件。而普通Jumbotron可能因为默认的内边距和布局结构，偶然没暴露这个问题，但其实统一给内容层加层级才是稳妥的做法。

额外小提示 #

如果你的Jumbotron里没有用.container，可以给所有直接子元素设置position: relative和z-index: 2，不过用.container是Bootstrap的标准写法，更推荐这种方式。

内容的提问来源于stack exchange，提问作者Michael Kowalewsky