將不透明度添加到背景圖片

我已經爲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

將不透明度添加到背景圖片

回答

相關問題