image - Opacity only on img not its background

Question

I have this img:

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

and this CSS:

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

you can see here that img's background-color also faded. How can I give opacity only to img and not to its background?

Answer 1

小提琴

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