Using Opacity of a Div without affecting The color of the Paragraph inside the Div

Question

I have created a div with background color black, and written a p inside it with white. When I am using opacity in the div, the color of the p is also getting changed into gray. Is there any way to change the opacity only of the div without affecting the color of the p?

Answer 1

Just read this article. It explains everything: https://css-tricks.com/rgba-browser-support/

You should have:

div {
     background: rgba(0, 0, 0, 0.5);
     color: #fff; 
}

There are also same or similar questions here, like this: https://stackoverflow.com/questions/15449280/html-css-text-background-transparent-but-text-not

Answer 2

You can use css :after selector to give shadow dom element the background color and opacity. This will not effect to p tag. Here is jsfiddle http://jsfiddle.net/vjandrei/fyvc3ejy/2/