不透明度仅在 img 而不是其背景

【问题标题】：Opacity only on img not its background不透明度仅在 img 而不是其背景
【发布时间】：2013-07-15 21:03:03
【问题描述】：

我有这个img：

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

还有这个 CSS：

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

你可以看到here img 的background-color 也消失了。我怎样才能将opacity 只给img 而不给它的background？

【问题讨论】：

恐怕你必须对一些更剧烈的变化持开放态度。 Canvas 可以做，添加父元素可以做或在图像服务器端应用过滤器就可以了。很有可能你实际上可以用 IE 过滤器做你想做的事。
Opacity 设置元素 img 的透明度，该元素应用了背景色。所以它也是透明的。您需要另一个 HTML 元素，其背景颜色位于图像后面。

【解决方案1】：

Fiddle

你需要另一个周围的 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，而不指定任何大小。

【讨论】：

我希望 img 变成白色
@majidgeek 这不是不透明度的意思。不透明度会让你看透，你会开始看到它背后的颜色。如果你想要白色，就把白色放在后面。
@majidgeek 那么绿色背景色有什么意义呢？你想达到什么结果？
@KilianStinson 您可以制作 img vertical-align:bottom; 或 display:block; 来修复图像下方的“空白”空间。（至少在 Chrome 中）
@RenéGeuze 好的，我怎样才能达到我的目标？