变暗的 CSS 背景图像？

应该是一个相当简单的问题。在我的网站上，我这样做:

#landing-wrapper {
display:table;
width:100%;
background:url('landingpagepic.jpg');
background-position:center top;
height:350px;
}

我想做的是使背景图像变暗。因为我在这个 DIV 中有 UI 元素，所以我不认为我可以在它上面放置另一个 DIV 来使它变暗。有什么建议吗？

309691

小开

最佳答案

你可以像下面这样使用 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;
}

下面是一个演示:

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