Opacity of div container affecting child

Question

I have a container with a background and opacity set. In it, I have a child. I want the child to appear to be on top of the container, but it isn't, the opacity affects the child.

Here's the HTML

<div class="container">
   <div class="child">some label</div>
</div>

And CSS:

.container {
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    opacity: 0.5;
    background-color: lightblue;
    z-index: 10;

}

.child {
    position: absolute;
    right: 0;
    bottom: 0;
}

For other reasons, the container must have a position of absolute.

The jsfiddle is here.

How can I avoid the opacity of the container affecting the child?

Set the `background` and `opacity` on a [pseudo-element](https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements) Example fiddle: https://jsfiddle.net/L60mqe5a/ — I haz kode, Aug 10 '17 at 13:41

score 0 · Accepted Answer · edited Aug 10 '17 at 13:41

0

.container {
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    //opacity: 0.5;
    background-color: rgba(173,216,230,0.5);
    z-index: 10;
}

edited Aug 10 '17 at 13:41

Nathan Arthur

8,287
7
55
80

answered Aug 10 '17 at 13:40

kyun

9,710
9
31
66

Opacity of div container affecting child

1 Answers1