Create non-transparent div on top of transparent parent element

Question

EDIT: Changed title to actually be correct

I\'m trying to simulate a modal popup in all HTML and CSS and am having a bit of bad luck w

Answer 1

Setting the color of the parent div with opacity with a rgba-color would make more sense here, because in this case the child element wouldnt inherit the opacity and wont be transparent!

so instead of using background-color: gray or #something, use something like this:

.modalBackground {
  background-color: rgba(222, 222, 222, 0.7);
}

Like this the parent-element has an opacity of 0.7 but is does not inherit it to any div or image or whatever inside of this div!

There are many rgba-generators out there on the net, try them.

http://www.css3-generator.de/rgba.html