分层背景图像下面的背景颜色？

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; 
}