Question

我有一个CSS元素，不透明度高于背景中的图片。在该元素内部有一个图像，它继承了不透明度，因此图像比正常情况稍暗：

<body>
 <div class="trans">
  <img class="not_trans" src="test.png">
 </div>
</body>

CSS：

body{
 background:url(stars.gif);
 background-color:black;
}
.trans{
 opacity:0.4;
}
img.not_trans{
 opacity:1.0;
}

但是图像仍然是透明的。

如何在不将img移出div的情况下实现正常的非透明图像？

如果有很多元素与不同的背景颜色级联，请使用
background-color:rgba(0,0,0,0.4)代替opacity不是一个简单的选择

我只希望一个img元素不继承周围元素的透明度

至少会有javascript的解决方案：

但CSS有解决方案吗？

Answer 1

在.trans上使用rgba而不是不透明度！像rgba（0,0,0,0.4）;或者你拥有的任何颜色。