CSS3背景颜色+图片

我有一个背景图像，并希望添加一个透明的填充颜色。我使用Firefox和Google Chrome等现代浏览器。CSS3背景颜色+图片

此代码的工作（但不解决问题）

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

这个代码不工作（但要解决我的问题）

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

为什么？解？

来源

2012-07-02 Jens Törnell

地方你的代码你想要做一个透明填充颜色或你想要的形象是透明的jsfiddle – Rab

？ –

背景图像不会透明。顶部的颜色应该是。然后背景“发光”通过颜色。 –

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

来源

2012-07-02 06:25:02 biziclop

不适合我。背景颜色在背景图像后面。 – zendu

最终创建了2个子div--一个用于背景图像，另一个用于背景色，如此处所述：http://stackoverflow.com/a/9730776/828062。 – zendu

有趣的是，你使用的浏览器是什么？ – biziclop

你必须做出一个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; 
}

来源

2012-07-02 06:33:36

CSS3背景颜色+图片

回答

相关问题