Opacity css affecting children elements

Question

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/

Answer 1

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>

Answer 2

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/

Answer 3

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

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