变暗的CSS背景图像？

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

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

我想要做的是使背景图像较暗。 因为我在这个DIV里面有UI元素，所以我不认为我真的可以把另一个div放在它上面来使它变暗。 build议？

Answer 1

您可以像这样使用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>