如何避免放置在不透明 DIV 中的 img 不透明？答案

【问题标题】：How to avoid opacity of an img placed in a DIV with opacity?如何避免放置在不透明 DIV 中的 img 不透明？
【发布时间】：2023-03-03 07:15:21
【问题描述】：

我有一个带有 CSS 样式背景颜色和不透明度 0.7 的 DIV。完美运行。但是......在那个DIV标签里面有一个IMG标签。我的问题是 IMG 获得与 DIV 相同的不透明度，这是我不想要的。我希望 IMG 不透明，并尝试设置“不透明度：1！重要；”对于IMG，但它仍然是半透明的DIV。

有人可以帮忙吗？

【问题讨论】：

标签： css

【解决方案1】：

您不能使用不透明度来做到这一点，因为这总是会影响所有子元素。您可以尝试使用 rgba-color 作为 div 的背景（all modern browsers 支持）并忽略不透明度。

background: rgba(0, 0, 255, 0.7); // 70% opaque blue

【讨论】：

IE6-9 也有 rgba 渐变滤镜，可能需要一些修修补补，但它可以工作。更多信息在这里：css-tricks.com/rgba-browser-support

【解决方案2】：

您好，我提到了一个属性，您可以通过该属性增加和减少父容器背景的不透明度，并且不会影响子容器。这很简单，基本上你必须在背景中使用 rgb 颜色和 alpha 来获得不透明度。

background:rgba(146,146,146,0.1);

【讨论】：

【解决方案3】：

我认为你不能阻止这种情况发生。您可能不得不在 div 之外使用 img 并以一些凌乱的位置放入其中：absolute; CSS。它不干净，但不管用。我更喜欢 oezi 的解决方案，但这可能与您想做的事情不兼容。如果是这样，您应该确定使用 oezi 的解决方案。

<div>
    <img src="" alt="">
    <div style="position: absolute;">
    Content
    </div>
</div>

【讨论】：