0

我在背景图片上方有一个不透明的 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的解决方案：

  1. 将 DOM 中的 img 标签移出 div
  2. 而是在那里设置一个垫片
  3. 定位img它所在的位置position:absolute

但是有 CSS 的解决方案吗？

4

1 回答 1

1

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

于 2013-03-27T22:24:20.723 回答