Menu
I have a paragraph element inside a div. The div has an opacity of 0.3 & the paragraph has an opacity of 1.
When I show the elements, it appears the paragraph is transparent, like it has an opacity of 0.3.
Is there a way to make the paragraph inside the div have full opacity? Maybe I can set a CSS value for this?
<div style="opacity: 0.3; background-color: red;">
<p style="opacity: 1;">abcde</p>
</div>
273
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.
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).
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).
You can't, the opacity level is relative to the parent's opacity, always. So 1.0 inside 0.3 would be 100% of 0.3, which is 0.3, and 0.5 inside 0.3 would be 50% of 0.3 which is 0.15. If you're only using opacity for the background color, you can specify the color using the RGBA method so that the red will be opaque and not the content (and thus the paragraph inside it).
<div style="background-color: rgba(255, 0, 0, 0.3);">
<p>abcde</p>
</div>
See here.
138
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
