分層背景圖像下面的背景顏色？

Question

有沒有一種方法可以在同一元素內的背景圖像上疊加背景色？這是我的CSS：

#pitchImg.hero{ 
    background:url("imgs/pitch-img.jpg") rgba(92,74,95,1); 
    background-repeat:no-repeat; 
    background-position:center; 
} 

我試過切換url和rgba的地方，但無濟於事。有沒有辦法做到這一點，而不是創建另一個div（如果存在這樣的事情）？

Answer 1

您可以將樣式僞:after元素和背景顏色將在背景圖像應用。

#pitchImg.hero{ 
    background-image:url("imgs/pitch-img.jpg"); 
    background-repeat:no-repeat; 
    background-position:center; 
} 

#pitchImg.hero:after { 
    background-color: rgba(92,74,95,1); 
    content: "";   
    height: 100%; 
    display: block; 
} 

jsFiddle Demo

Answer 2

獨立出來： http://jsfiddle.net/a5vbuufb/1/

#test{ 
    background-image: url('https://www.google.com/images/srpr/logo11w.png'); 
    background-color: blue; 
    height: 400px; 
}