Un-transparent the child with transparent Parent ( The Most Irritating flaw in CSS)

Question

for example a parent element "div" has opacity property hence inheriting opacity to all its childs.What i want is "p" child of div to not inherit opacity property..i tried putting p's opacity to 1.0 but no use.

p.s. i want a solution apart from using "positioning" property.i know it works by position of elements over each other.but i want to reseolve parent-child inheritence issue. Thanks to all

Answer 1

share your attempt with a code, it ll be easier to discuss this over a code

Answer 2

positioning is the only way of doing this.lay your suppossed-to-be-child elements over the parent without actually making it the child.If you decide to append it,opacity will always be inherited
orr...
use rgba
red,green,blue,alpha(opacity)
CSS
#container
{
background:rgba(56,255,255,0.1);
}
#child
{
background:rgba(205,206,255,0.7);
}
yup this works
https://code.sololearn.com/Whc5l1vzx49d/?ref=app

Answer 3

dude i gave you another option of rgba

Answer 4

but using positioning for opacity, will it have any effect on the responsiveness of website? incase of smaller screens the overlapping elements will be scattered?