Question

我为div设置了背景颜色和背景图像。如何将不透明度添加到背景图像，以便背景颜色也可见？

这是我的代码：

CSS：

.box{
    background-color: green;
    background-image: url('http://farm8.staticflickr.com/7308/12305815623_3d1614042a_n.jpg');
    background-repeat: no-repeat;  
    font-size: 40px;
    width: 320px;
    height: 200px;    
}

HTML：

<div class="box">
    <div class="wrap">Some text</div>    
</div>

演示： http://jsfiddle.net/Yv6T3/

Answer 1

我建议部分透明的PNG是最好的解决方案。它不需要任何黑客攻击，适用于所有平台，即使在IE6上也能很好地降级

Answer 2

添加不透明度有几个CSS属性：

opacity: 0.2; /* Standard property, for all modern browsers */
filter: alpha(opacity=20); /* For old IE */

查看更新后的小提琴：http://jsfiddle.net/Yv6T3/1/

Answer 3

已经被问过了，答案非常好：How do I give text or an image a transparent background using CSS?

只需使用

background-color:rgba(255,0,0,0.5);

其中0.5是你的透明度。

当然，无处不在，但在所有现代浏览器中都是如此。

为背景图像添加不透明度

3 个答案: