Opacity of the div affects the innerHTML values

Question

I have a div with background color as green and opacity as 0.4.

<div id="container" style="background-color:green;opacity:0.4">Text</div>

And I have a text inside the div. When i set the opacity for the div, the innerHTML values is also affected. I want the div background color with opacity 0.4,and the text with normal opacity. Is it possible to achieve my requirement?

Div with text

Thanks in advance

@AbdulMuheet Even if s/he could, it wouldn't help to keep the text from being affected by `opacity`. — Hashem Qolami, Feb 28 '15 at 09:35
you can wrap your text inside tag p or span and then add your styles to this tag or another solution is use css pseudo class :not, but you will need to put your styles in style tag or another css file — user3127896, Feb 28 '15 at 09:39

Sadikhasan · Answer 1 · 2015-02-28T09:45:58.830

1

Manual

<div id="container" style="background-color:rgba(0,200,0,0.4);">Text</div>

Demo

edited Feb 28 '15 at 09:45

answered Feb 28 '15 at 09:39

Sadikhasan

18,365
21
80
122

this is a duplicated solution – ZEE Feb 28 '15 at 09:41

Opacity of the div affects the innerHTML values

1 Answers1