影响子元素的不透明度CSS

Question

我正在尝试在用户禁用 javascript 时实现错误消息。我为我当前的工作创建了一个 jsfiddle 。我有 2 个 div 层，一个覆盖整个页面，另一个在上面显示警告消息，但不透明度设置影响覆盖层也会影响警告消息。我尝试过使用之前问题中的技术，但无法使其发挥作用。谁能帮助我吗？

http://jsfiddle.net/xcPcv/

Answer 1

只需将消息移到褪色容器之外...

从：

<div id="fadeMe">
    <div id="center">You have javascript disabled.</div>
</div>

到：

<div id="fadeMe">
</div>
<div id="center">You have javascript disabled.</div>

http://jsfiddle.net/xcPcv/7/

Answer 2

使用 rgba(0,0,0,.75) 作为背景，而不是不透明度：

http://jsfiddle。净/xcPcv/9/

Answer 3

问题是不透明度适用于所有包含的（子）元素，而不仅仅是您要应用

    opacity

的元素。这样做的副作用是进一步的不透明度设置将是父不透明度的那一部分。

在您的情况下，您只需将弹出 div 移到 fadeMe div 之外即可

    <div id="fadeMe"></div>
    <div id="center">You have javascript disabled.</div>