不透明度仅在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那么绿色背景颜色有什么意义呢？你想达到什么结果？ –

回答