使用 :before CSS3 伪选择器使背景图像变暗答案

【问题标题】：Darkening background image with :before CSS3 pseudo-selector使用 :before CSS3 伪选择器使背景图像变暗
【发布时间】：2018-04-04 06:47:50
【问题描述】：

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

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

我的 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>

【问题讨论】：

粘贴你的三角形代码，告诉我们你做了什么。
同时提供你的 CSS

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

更改一些 CSS，如下所示：

.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);
  z-index: 400;
}
.jumbotron .container {
  padding: 100px 0;
  position: relative;
  z-index: 800;
}
.jumbotron h1,
.jumbotron .lead {
  color: #fff;
}

<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>

【讨论】：

【解决方案3】：

另一种更简单的方法是使用多个背景，将线性渐变作为图像上的一层：

.jumbotron {
  position: relative;
  background: 
  linear-gradient(rgba(0, 51, 153, 0.8),rgba(0, 51, 153, 0.8)),
  url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover; 
}

.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>

【讨论】：