Have a child opacity different then parent opacity with CSS - html

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?

Answer 1

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>

Answer 2

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;
}

Answer 3

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;
}

Answer 4

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>

Answer 5

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>