如何使用Jquery防止Sub Div的不透明度

Question

我将主div的不透明度添加为opacity:0.5我还有子div包含消息。 HTML：

<div id="word_wrap">
    <div id="top_div">
        Hi Folks Nice to Meet you
            </div>
</div>
<input id="floating_button" type="button" value="Click Me"/>

这是小提琴：

http://jsfiddle.net/JVQTh/ 现在它的不透明度完全出现在div include子div上。但我想显示没有不透明度的子div，背景不透明度。是否可以在jquery或css中执行此操作。

在上面的小提琴中，我将sub div背景设为红色。我想显示没有不透明度的子div。如何排除sub div本身或相应div本身的不透明度。

感谢。

Answer 1

当您在元素上设置不透明度时，该元素的所有子元素的不透明度都为1，但由于它们位于父元素内，因此父元素上设置的不透明度也会影响子元素，因此您不能将子项的不透明度设置为比父项更“可见”，因为子项不透明度已经为1。

你最接近的是rgba颜色，并非所有浏览器都支持：

background-color: rgba(255, 0, 0, 0.5);

FIDDLE

这会将背景颜色设置为红色，并且alpha（不透明度）为0.5，而不会在整个元素上设置不透明度，或者它是子元素。