CSS3背景色+图片

Posted 2023-03-06

【中文标题】CSS3背景色+图片

【英文标题】：CSS3 background color + image

【发布时间】：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');

为什么？解决方案？

【问题讨论】：

您要制作透明填充颜色还是要图像透明？

背景图片不会是透明的。上面的颜色应该是。然后背景通过颜色“发光”。

【参考方案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 - 一个用于背景图像，一个用于背景颜色，如下所述：***.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;

​