html - 使用 :before CSS3 pseudo-selector 使背景图像变暗

Question

我的目标是使用一些 CSS 技巧向大屏幕背景图像添加不透明度为 50% 的深色叠加层，使其更暗。

我尝试使用 :before CSS 选择器在大屏幕前面添加深色矩形，这在普通大屏幕类上工作正常，但是在流体大屏幕上使用相同的方法，会使容器中的内容和按钮被覆盖且无法访问。

我的 HTML 和 CSS 代码。目前我正在使用 Bootstrap 4 类。

.jumbotron {
  position: relative;
  background: url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover; 
}
.jumbotron:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 51, 153, 0.8);
}
.jumbotron .container {
  padding: 100px 0;
}
.jumbotron h1,
.jumbotron .lead {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid mb-0 text-center">
	<div class="container">
		<h1 class="display-4">MAIN PAGE</h1>
		<a class="btn btn-primary btn-lg mt-" href="#sec-pricing" role="button">Learn more</a>
	</div>
</div>

Answer 1

尝试添加 z-index

.jumbotron {
  position: relative;
  background: url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover; 
}
.jumbotron:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 51, 153, 0.5);
}
.jumbotron .container {
    z-index: 10;
    position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="jumbotron jumbotron-fluid mb-0 text-center">
    <div class="container">
        <h1 class="display-4" style="color:var(--white);">MAIN PAGE</h1>
        <a class="btn btn-primary btn-lg mt-" href="#sec-pricing" role="button">Learn more</a>
    </div>
 </div>