Opacity css affecting children elements

问题:

I am trying to implement an error message when user has disabled javascript. I have created a jsfiddle for my current work. I have 2 div layers one covering the whole page and an another one on top of that to show the warning message, but the opacity settings affects for the cover layer affects the warning message also. I have tried using the techniques from previous questions but I could not make it work. Can anyone help me?

http://jsfiddle.net/xcPcv/

回答1:

Just move the message outside of the faded container ...

From:

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

To:

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

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

回答2:

Instead of opacity, use rgba(0,0,0,.75) for the background:

http://jsfiddle.net/xcPcv/9/

回答3:

The issue is that opacity applies to all contained (child) elements, not just the element you are applying

    opacity

to. A side effect of this is that a further opacity setting will be that fraction of the parent opacity.

In your case you need to do nothing else but move the popup div outside the fadeMe div

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