Question

有没有办法在背景图像的同一元素中叠加背景颜色？这是我的CSS：

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

我尝试过切换网址和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;
}

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

2 个答案: