Html 使 CSS 背景图像变暗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26621513/
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
Darken CSS background image?
提问by Tom Maxwell
Should be a fairly simple question. In my website I do this:
应该是一个相当简单的问题。在我的网站上，我这样做：
#landing-wrapper {
display:table;
width:100%;
background:url('landingpagepic.jpg');
background-position:center top;
height:350px;
}
What I'd like to do is make the background image darker. Since I have UI elements inside this DIV I don't think I can really place another div over it to darken it. Suggestions?
我想做的是使背景图像更暗。因为我在这个 DIV 中有 UI 元素，所以我认为我不能真正在它上面放置另一个 div 来使其变暗。建议？
回答by Fahad Hasan
You can use the CSS3 Linear Gradientproperty along with your background-image like this:
您可以将CSS3 线性渐变属性与背景图像一起使用，如下所示：
#landing-wrapper {
display:table;
width:100%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
background-position:center top;
height:350px;
}
Here's a demo:
这是一个演示：
#landing-wrapper {
display: table;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
background-position: center top;
height: 350px;
color: white;
}<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>