Have a child opacity different then parent opacity with CSS

Question

Here are my box classes

.rectangle-box {
    width: 200px;
    height: 30px;
    background: #808080;
    opacity: 0.3;
    float: right;
}

.rectangle-red {
    width: 65px;
    height: 30px;
    background: #ff4742;
    opacity: 1;
    float: left;
}

In HTML:

<div class="rectangle-box">
    <div class="rectangle-red"></div>
</div>

DEMO: https://jsfiddle.net/uq6ectfc/1/

I need rectangle-red to have opacity of 1 and rectangle-box of 0.3. But it sticks to the parent opacity.

How can I fix it?

Possible duplicate of [Resetting the opacity of a child elements - Maple Browser (Samsung TV App)](http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app) — Reinstate Monica -- notmaynard, Dec 30 '15 at 20:59
That possible duplicate was in fact linked from https://developer.mozilla.org/en-US/docs/Web/CSS/opacity under "If you do not want apply opacity to child element...". If it does not look like a duplicate to you, I'll retract my CV. — Reinstate Monica -- notmaynard, Dec 30 '15 at 21:01
@iamnotmaynard The problem with that dupe is it doesn't cover other inner child elements nor background images using for example svg content. — Asons, Dec 30 '15 at 21:07

Vitorino fernandes · Accepted Answer · 2015-12-30T21:01:27.743

You can't the opacity cannot be greater than parent

but you can use two methods

I have used rgba rgba(0,0,0,0.0)

.rectangle-box {
  width: 200px;
  height: 30px;
  background: rgba(128, 128, 128, 0.3);
  float: right;
  position: relative;
}

.rectangle-red {
  width: 65px;
  height: 30px;
  background: #ff4742;
  opacity: 1;
  float: left;
}

<div class="rectangle-box">
  <div class="rectangle-red"></div>
</div>

Or the second method i have used :pseudo element to add a background

.rectangle-box {
  width: 200px;
  height: 30px;
  float: right;
  position: relative;
}

.rectangle-box:after {
  content: '';
  opacity: 0.3;
  background: #808080;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index:-1;
}

.rectangle-red {
  width: 65px;
  height: 30px;
  background: #ff4742;
  opacity: 1;
  float: left;
}

<div class="rectangle-box">
  <div class="rectangle-red"></div>
</div>

score 5 · Answer 2 · answered Dec 30 '15 at 20:55

5

Use RGBA instead of hex. using opacity: affects child elements and rgba does not

.rectangle-box {
        width: 200px;
        height: 30px;
        background-color: rgba(128,128,128, 0.3);
        float: right;

    }

    .rectangle-red {
        width: 65px;
        height: 30px;
        background-color: rgba(255,71,66, 1);
      float: left;
    }

answered Dec 30 '15 at 20:55

Ty T.

586
5
18

I like this solution. The only caveat here (and the key to the trick) is that only the background-color will have the transparency. If there is other content, it will not have transparency. – gfullam Dec 30 '15 at 20:58

Roman Khrystynych · Answer 3 · 2015-12-30T20:53:25.353

A better way to structure this would be to create a div that contains both boxes. This way each of the boxes opacity will not interfere with each other.

<div class="container">
    <div class="rectangle-box"></div>
    <div class="rectangle-red"></div>
</div>

.container{
    width: 200px;
    height: 30px;
    float: right;
}
.rectangle-box {
    width: 100%;
    height: 100%;
    background: #808080;
    opacity: 0.3;
}

.rectangle-red {
    width: 65px;
    height: 100%;
    background: #ff4742;
    opacity: 1;
    float: left;
}

Szymon · Answer 4 · 2015-12-30T20:58:09.480

1

you can't

All you can do is create element inside .rectangle-box absolute (my case) or relative or whatever you want with lower opacity .lower-opacityso they are siblings and not disturb each other opacity property

.rectangle-box {
    width: 200px;
    height: 30px;
    float: right;
    position: relative;
}
.lower-opacity{
    position: absolute;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    background: #808080; //**EDITED** BACKGROUND NOW WILL BE TRANSPARENT
}
.rectangle-red {
    width: 65px;
    height: 30px;
    background: #ff4742;
    opacity: 1;
    float: left;
}


<div class="rectangle-box">
    <div class="lower-opacity"></div>
    <div class="rectangle-red"></div>
</div>

edited Dec 30 '15 at 20:58

answered Dec 30 '15 at 20:51

Szymon

1,281
1
20
36

this won't work cause rectangle-box has bg-color with no opacity and it will cover `lower-opacity` one – Michael Dec 30 '15 at 20:56
no its not, then use this background-color on lower-opacity you just didnt get the logic here. You can do whatever you want with this but thats the structure you should use to get it work. – Szymon Dec 30 '15 at 20:57

Asons · Answer 5 · 2015-12-30T21:04:37.837

Here is a nice and neat way using pseudo elements.

With this you can as well add images and svg to each background which gives a lot of options.

If you need other elements within each box, you'll need the second inner div.

.rectangle-box {
  width: 200px;
  height: 30px;
  float: right;
  position: relative;
}

.rectangle-box:before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #808080;
  opacity: 0.3;
}
.rectangle-box:after {
  content: "";
  top: 0;
  left: 0;
  width: 65px;
  height: 100%;
  position: absolute;
  background: #ff4742;
  opacity: 1;
}

<div class="rectangle-box">
</div>

Have a child opacity different then parent opacity with CSS

5 Answers5