Menu
I have a background on a page body that is an image which I want to show through the first level of divs but not the second
<body> <div style='opacity:0.9;'><p>This is a wrapper that shows some of the background</p> <div style='background-color:#fff;'><p>This is a child div that I want to be all white</p> </div> </div> </body> Obviously the second level div picks up the opacity of .9 as well is there a way to override this?
995
Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel).
Basically, you can't override the opacity of a child. The answer you might be looking for will depend on what it is you are actually trying to do. Paulie is right, opacity effects the entire element (including children) and can't be reversed by a child element.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie.
Answer: Use the CSS RGBA colors There is no CSS property like "background-opacity" that you can use only for changing the opacity or transparency of an element's background without affecting its child elements.
Hi you can do as like this
You can define parent opicity
and child as like you
ex.
css
.parent{ padding:20px; background:rgba(112,81,246,0.3); } .child{ padding:20px; background:rgba(112,81,246,0.6); } HTML
<div class="parent"> <div class="child">Hello i m child</div> </div> Live demo here http://jsfiddle.net/rohitazad/PC4sL/
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
