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

CSS3背景颜色+图像

2 个答案: