css - CSS3背景色+图片

Question

我有一个背景图片，想在上面添加一个透明的填充颜色。我使用现代浏览器，例如 Firefox 和 Google 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%;
}
​

Answer 2

您必须制作一个与窗口大小相同的 div 才能获得效果。这是一个jsfiddle和下面的代码。

html{
    background: url('http://tribulant.net/lightbox/files/2010/08/image-2.jpg');
}
.color {
    background-color: rgb(100,0,0); 
    opacity: 0.5;
    height: 100%;
    width: 100%;
    position: absolute; 
    top: 0px;
    bottom: 0px;
}

​</p>