不透明度僅在IMG而不是它的背景

<img src="img1.png" alt="" />

這個CSS：

img{ 
    background-color:green; 
    opacity:0.4; 
    padding:5px; 
}

你可以看到here是img的background-color也就淡了。我怎樣才能給opacity只有img和不是到它的background？

恐怕你不得不開放一些更大的變化。畫布可以做到，添加一個父元素可以做或者在圖像服務器端應用過濾器。有機會，你實際上可以做到你想要的IE過濾器。 –

不透明度設置應用背景顏色的元素img的透明度。所以它也是透明的。您需要在圖像背後使用背景色的另一個HTML元素。 –

您需要另一個周圍的HTML元素來達到這種效果。

HTML：

<div class="wrapper"> 
    <img src="http://i.stack.imgur.com/hUOmz.jpg" alt="" /> 
</div>

CSS：

img { 
    opacity: 0.4; 
    padding: 5px; 
} 

.wrapper { 
    font-size: 0; 
    display: inline-block; 
    background-color: green; 
}

設置display到inline-block包裝了img，不指定任何大小。

2013-07-17 10:46:42

我希望'img'漸變爲白色 –

@majidgeek這不是什麼不透明的含義。不透明會讓你看透，你會看到它背後的顏色。如果你想要白色，請將白色放在後面 –

@majidgeek那麼綠色背景顏色有什麼意義呢？你想達到什麼結果？ –

回答