我已经看了几个关于这个的SO帖子：我想通过添加叠加来使当前背景图像变暗。
#header1 {
background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg");
background-position:center center;
position: relative;
background-size: cover;
padding-bottom:5em;
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
2378
2018-01-10 05:43
起源
尝试添加 position: relative; z-index: -1; 至 #header1 代替 .overlay - jsfiddle.net/x1v1jdgk - Anonymous
答案:
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/
background-size: cover;
}
h1 {
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding-top: 10px;
padding-bottom: 100px;
padding-left: 20px;
padding-right: 20px;
}<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>按照预期，h1充当额外的可视层，其填充覆盖＃header1。
第二个解决方案是将原始背景图像添加到.header，并将h1中的样式赋予#overlay，并进行一些调整，这也应该可以解决问题。
还有另一个可能的解决方案（类似于第二个），您可以将背景图像添加到叠加层，并从我给＃header1或.jumbotron的示例中获取h1样式
除了第一个解决方案之外，您还应该能够通过添加背景颜色来添加额外的图层：叠加。我不确定它将如何影响背景，但从我猜测它应该只添加一层额外的颜色。
这是我使用这种技术的个人示例。
5
2018-01-10 05:54
我得到了黑暗的背景，但它并没有一直拉伸，因为图像的某些部分没有被深色背景覆盖。如何调整黑暗背景的高度？ - patrickhuang94
你拿走h1的边缘怎么样？然后将padding-top和padding-bottom添加到h1。这应该工作。您添加填充以拉伸暗覆盖。因此，在您的实际示例中，您可能必须使用暗覆盖添加或减少元素的填充。 - HTMLNoob
添加填充会更改深色背景和原始背景图像。还有其他建议吗？ - patrickhuang94
使用 线性渐变
<div class="bg-img"></div>
.bg-img {
width: 100%;
height: 100%;
background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
11
2018-01-10 06:09
z-index属性指定元素的堆栈顺序。 堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。 为了你的答案，你可以访问 CSS-技巧
0
2018-01-10 05:55
我想你想要完全隐藏背景图像，然后你需要在rgba（0,0,0,1）中将alpha的值设置为1
0.7定义了您需要显示特定元素的透明度级别。
下面的链接解释了覆盖非常好的例子的概念
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
0
2018-01-10 06:08