javascript - Specify parent divs opacity but make it not affect children HTML elements

Question

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>

Answer 1

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.