Html 向背景图像添加深色叠加层
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34702477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a dark overlay to background image
提问by patrickhuang94
I've looked at several SO posts about this: I want to darken the current background image by adding an overlay.
我已经看过几篇关于此的 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>Maybe I'm not understanding how to use z-index, or maybe I'm missing something here. The darker background used for tinting isn't showing up. Any pointers?
也许我不明白如何使用 z-index，或者我在这里遗漏了一些东西。用于着色的较暗背景未显示。任何指针？
采纳答案by HTMLNoob
#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>As intended the h1 acts as an extra visual layer and its padding covers the #header1.
正如预期的那样，h1 作为一个额外的视觉层，它的填充覆盖了#header1。
A second solution would be to add the original background image to .header and have the styles from h1 given to #overlay and with a bit of tweaking that should also do the trick.
第二种解决方案是将原始背景图像添加到 .header 并将 h1 中的样式赋予 #overlay 并进行一些调整，这也应该可以解决问题。
And yet another possible solution(similar to the second one) you can add the background-image to overlay and have the h1 styles from the example I gave to #header1 or .jumbotron
还有另一种可能的解决方案（类似于第二个），您可以将背景图像添加到叠加层，并使用我提供给 #header1 或 .jumbotron 的示例中的 h1 样式
In addition to the first solution, you should be able to add extra layer by adding a background-color: to overlay. I'm not sure how it will effect the background exactly but from what I'm guessing it should just add an extra layer of color.
除了第一个解决方案之外，您应该能够通过添加背景颜色来添加额外的图层：覆盖。我不确定它会如何影响背景，但从我猜测它应该只是添加一个额外的颜色层。
Here is a personal example where I used this technique.
这是我使用此技术的个人示例。
回答by varun aaruru
Use Linear gradient
使用线性渐变
to darken the background refer to this codepenand this link
<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;
}
}
回答by Fahim Foysal Kamal
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. for your answer, you can visit css-tricks
z-index 属性指定元素的堆栈顺序。具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。对于您的答案，您可以访问css-tricks
回答by Ramesh Ponnada
I guess you would like to completely hide the background image, Then you need to set the value of alpha to 1 in rgba(0,0,0,1)
我猜你想完全隐藏背景图像，然后你需要在 rgba(0,0,0,1) 中将 alpha 的值设置为 1
0.7 defines the transparency level you need the particular element to be shown.
0.7 定义了您需要显示特定元素的透明度级别。
below link explain concept of overlaying with very good examples
下面的链接用很好的例子解释了叠加的概念
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
