CSS3背景色+图片答案

【问题标题】：CSS3 background color + imageCSS3背景色+图片
【发布时间】：2012-07-02 13:37:58
【问题描述】：

我有一张背景图片，想在上面添加一个透明的填充颜色。我使用现代浏览器，例如 Firefox 和 Google Chrome。

此代码有效（但不能解决问题）

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

此代码不起作用（但应该可以解决我的问题）

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

为什么？解决方案？

【问题讨论】：

您要制作透明填充颜色还是要图像透明？
背景图片不会是透明的。上面的颜色应该是。然后背景通过颜色“发光”。

标签： css background opacity transparent

【解决方案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%;
}

【讨论】：

对我不起作用。背景颜色在背景图片后面。
最终创建了 2 个子 div - 一个用于背景图像，一个用于背景颜色，如下所述：stackoverflow.com/a/9730776/828062。
有意思，你用的是什么浏览器？

【解决方案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;
}

【讨论】：