How to make inner div opacity 1 in CSS?

Question

I am trying to achieve inner div opacity 1 while its parent div opacity in 0.5. Please find my codepen link

https://codepen.io/SandeshSardar/pen/moVyEy

As per current result inner div to getting opacity 0.5 even after applying opacity 1.

<div class="container">
<div  class="image">
  <div class="green" >
    <p>this div also should take opacity </p>
    </div>
    <div class="middle">

    </div>
</div>

    .container {
  position: relative;
  width: 50%;
}

.image {
position: absolute;
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
   background: red;
    height: 150px;
  width: 500px;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  height: 50px;
  width: 50px;
  background-color: blue;
}

.container .image {
   background: rgba(255,0,0,.3);

}

.container .middle {
  opacity: 1;
  z-index: 9999;
}

.container .green {
 position: absolute;
  display: block;
  width: 100%;
   background: green;
    height: 50px;
  width: 500px;
}

Nikolai · Answer 1 · 2019-03-01T01:56:08.927

1

You can set the parent .image with

background:rgba(255,0,0,0.5);

and the child .middle with

background:rgba(0,0,255,1);

The 4th value of rgba is the opacity!

EDIT:

.container .green {
 position: absolute;
  display: block;
  width: 100%;
   background: rgba(0,255,0,1);
    height: 50px;
  width: 500px;
}

If you want the opacity of .green to be 0.1 change it to rgba(0,255,0,0.1) instead of opacity: 0.1

edited Mar 01 '19 at 01:56

answered Feb 28 '19 at 22:14

Nikolai

555
7
17

it's not really an inheritance – Temani Afif Feb 28 '19 at 22:14
1

Yes, the .middle's opacity multiplies the .container's opacity. It's not an inheritance, it's more like a max range (100% inner opacity = 1*outer opacity = 1*0.5 = 0.5). – Nikolai Feb 28 '19 at 22:26
1

Please remove duplicate, i have updated my codepen and question – Feb 28 '19 at 22:34
@user7423463 check my update and use rgba instead of opacity – Nikolai Mar 01 '19 at 01:56

How to make inner div opacity 1 in CSS?

1 Answers1