css opacity stacking order

Question

I'm try to add a white div on top of an image, then add opacity to the white layer so that I can put text over the image.

The HTML:

<div id="red">
    <div id="white">
        <div id="blue"></div>
    </div>
</div>

The CSS:

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
    z-index: -15;
}
#white {
    background: white;
    opacity: 0.5;
    position: relative;
    z-index: -10;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
}

http://jsfiddle.net/Nd2EZ/1/

The background appears pink, which is great. But the blue box I want to appear on top, in blue - but sadly it is purple. So the blue box is a bit opaque for some reason.

How can I make the blue box appear on top, without any opacity?

It is not possible. You could use some extra markup though and put the desired content of `#white` into a sibling of `#blue` and give that element the `opacity:0.5` — user1950929, Jun 01 '13 at 21:14
[CSS Opacity That Doesn’t Affect Child Elements](http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/) — Antony, Jun 01 '13 at 21:15

score 3 · Answer 1 · answered Jun 01 '13 at 21:19

3

Instead of using opacity, you can use rgba(Red - Green - Blue - Alpha), this will get you the desired effect..

#white {
    background: rgba(255,255,255,.5);
    position: relative;
    z-index: -10;
}

Demo

BTW, do you really need z-index :-/ ?

answered Jun 01 '13 at 21:19

Mr. Alien

153,751
34
298
278

Note that rgba values will be ignored in IE8. The same goes for opacity, but there's a more direct work around for that. – ChrisD Jun 01 '13 at 21:27
@ChrisD There are [polyfills](http://css3pie.com/documentation/supported-css3-features/) available for that – Mr. Alien Jun 01 '13 at 21:29

score 2 · Answer 2 · answered Jun 01 '13 at 21:13

The opacity applies to all content, including children. Imagine the children being rendered first, and then having the opacity applied to this rendered content. If the element is not a child - i.e. in a different hierarchy and positioned over - then it won't be affected by the opacity of the (previous) parent.

<div id="red">
    <div id="white">
    </div>
</div>
<div id="blue"></div>

#blue {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
}

Jonathon · Answer 3 · 2013-06-01T21:45:59.987

You could could structure your HTML like this:

<div id="red">
    <div id="white"></div>
    <div id="blue"></div>
</div>

and change your css to:

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
}
#white {
    background: white;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

score 0 · Answer 4 · edited May 23 '17 at 12:05

0

Mistakes you have done are by taking them as child. The opacity effects the child. When white opacity is 0.5 when blue opacity will be 0.5 even it to 1. More documentation is here.

See this answer to understand more.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 01 '13 at 21:16

iraycd

892
1
8
23

score 0 · Answer 5 · answered Jun 01 '13 at 21:18

move div#blue to be a child of div#red, and than set the css style position of div#blue to absolute;

HTML

<div id="red">
    <div id="white">
    </div>
    <div id="blue"></div>
</div>

CSS

div {
    width: 300px;
    height: 300px
}
#red {
    background: red;
    position: relative;
    z-index: -15;
}
#white {
    background: white;
    opacity: 0.5;
    position: relative;
    z-index: -10;
}
#blue {
    background: blue;
    width: 100px;
    height: 100px;
    opacity: 1;
    position:absolute;
    left:0em;
    top:0em;
}

css opacity stacking order

5 Answers5