不透明度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.net/xcPcv/9/

Answer 3

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

    opacity

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

在你的情况下，除了在fadeMe div之外移动弹出div之外，你不需要做任何其他事情

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