不透明度仅适用于img而非背景

Question

我有img：

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

和这个CSS：

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

您可以看到img的{​​{1}} background-color也已消失here。如何仅将opacity img和 提供给background？

Answer 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换行，而不指定任何大小。