将不透明度添加到背景图片

我已经为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/

来源

2014-02-05 user2738640

你可以做一点点的解决。看到这个：[透明背景图片]（http://css-tricks.com/snippets/css/transparent-background-images/） – Itay

这已经回答gazillion次：http://stackoverflow.com/search?q= css +背景+不透明 – Joonas

我会建议一个部分透明的PNG是最好的解决方案。它不需要任何黑客，适用于所有平台，并很好地降低甚至IE6

来源

2014-02-05 10:56:51 Exelian

有用于增加不透明度几个CSS属性：

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

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

来源

2014-02-05 10:57:47

不知道这是他们之后 - 他们只希望不透明适用于图像，而不是整个div。 – Wez

是的，这不是我要找的。我只想为背景图片添加不透明度，而不是整个div。 – user2738640

有被要求已经得到的答复都是相当不错的：How do I give text or an image a transparent background using CSS?

只使用

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

其中0.5是您的透明度。

当然，在任何地方都行不通，但是在所有的现代浏览器中都是如此。

来源

2014-02-05 10:59:48 smnbbrv

将不透明度添加到背景图片

回答

相关问题