變暗CSS背景圖片？

Question

應該是一個相當簡單的問題。在我的網站，我這樣做：

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

我想要做的是使背景圖像較暗。由於我在這個DIV裏面有UI元素，我不認爲我真的可以在它上面放置另一個div來使它變暗。建議？

Answer 1

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