CSS3背景颜色+图像

Question

我有一个背景图片,并希望在其上添加透明填充颜色.我使用Firefox和谷歌Chrome等现代浏览器.

此代码有效(但不能解决问题)

background: url('bkg.jpg'), rgba(0,0,0, .5);

这段代码不起作用(但应解决我的问题)

background: rgba(0,0,0, .5), url('bkg.jpg');

为什么？解？

Answer 1

https://developer.mozilla.org/en/CSS/background说:

注意:背景颜色只能在最后一个背景上定义,因为整个元素只有一种背景颜色.

http://www.w3.org/TR/css3-background/#layering说:

背景颜色(如果存在)将绘制在所有其他图层下方.

http://www.w3.org/TR/css3-background/#background-color说:

此属性设置元素的背景颜色.颜色在任何背景图像后面绘制.

也许你可以使用:before/:after伪元素代替绝对定位.

http://jsfiddle.net/3mNkZ/3/

div {
    background: rgba(0,255,0, .5);
    width: 200px; height: 200px;
    border: 10px solid red;
    position: relative;
    font-size: 100px;
    color: white;
}

div:before {
    background: url('http://placekitten.com/200/150');
    content: ' ';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}
?