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

.re         


        

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