带有:CSS3伪选择器之前的黑暗背景图像

Question

我的目标是使用一些CSS技巧来添加黑暗覆盖层，并在Jumbotron背景图像中添加50％的不透明度，以使其变得更暗。

我已经尝试使用：在CSS选择器之前，在Jumbotron前添加了深色矩形，该矩形在正常的Jumbotron类上正常工作，但是在流体Jumbotron上使用相同的方法，在容器中可以覆盖容器和无法访问的内容和按钮。p>我的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>

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

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