变暗CSS背景图片？

2014-10-29 1024 views 69 likes

应该是一个相当简单的问题。在我的网站，我这样做：变暗CSS背景图片？

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

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

来源

2014-10-29 Tom Maxwell

回答

191

您可以使用CSS3 Linear Gradient属性与你这样的背景图像一起：

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

来源

2014-10-29 01:52:32

这并不在IE9工作。有什么办法呢？ – 2015-09-28 16:21:16

@NickParsons hahahah – john1717 2017-09-04 05:15:15

@BrechtMachiels我认为IE的最佳解决方法是使用透明图像 – john1717 2017-09-04 05:15:46

变暗CSS背景图片？

回答

相关问题