Question

我的目标是使用一些CSS技巧为jumbotron背景图片添加50％不透明度的暗叠加，使其更暗。

我尝试使用：在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>

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，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

使用CSS3伪选择器之前的背景图像变暗

3 个答案: