image - 背景ではなく img のみの不透明度

Question

私はこれを持っていますimg：

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

そしてこのCSS：

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

ここでも色あせていることimgがわかります。background-colorどうすればそのにopacityだけ与えてimg、そのに与えないbackgroundことができますか?

score 2 · Accepted Answer

この効果を実現するには、別の周囲の 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

1 に答える 1