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

Question

我有一个带有CSS样式的背景色和0.7不透明度的DIV。效果很好。但是..。在DIV标记内有一个IMG标记。我的问题是IMG得到了和DIV一样的不透明度，这是我不想要的。我希望IMG是非透明的，并尝试为IMG设置"opacity: 1 !important;“，但它仍然是半透明的，因为DIV。

有人能帮帮忙吗？

Answer 1

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

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

Answer 2

您好，我提到的属性，您可以通过它来增加和减少不透明度的父容器背景，这将不会影响子容器。这很简单，看css，基本上你必须在背景中使用rgb颜色&不透明度的alpha。

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

或查看示例：- http://jsfiddle.net/8LFLd/20/

Answer 3

我认为你不能阻止这种情况的发生。你可能不得不在div之外加上一个img，然后在里面放一些乱七八糟的位置:绝对；CSS。它不是干净的，但只要能用就行了。我更喜欢oezi的解决方案，但这可能与你想要做的事情不兼容。如果是这样的话，你绝对应该采用oezi的解决方案。

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