How to apply opacity without affecting the child elements of HTML / CSS?

I want to achieve this using html and css:


I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.

jsFiddle of my try here

The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).

This question and all comments follow the "Attribution Required."

All Answers

Answers Loading...
Leave a Reply
You must be logged in to post a answer.
About the author