CODEWITHSUNDEEP
htmlcssopacity
Ersel Aker
Ersel Aker

Reputation: 855

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/

Upvotes: 1

Views: 1390

Answers (3)

Hawken
Hawken

Reputation: 2119

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>

Upvotes: 0

Vigrond
Vigrond

Reputation: 8198

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

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

Upvotes: 1

Alex
Alex

Reputation: 35417

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/

Upvotes: 1

Related Questions