title: How to apply an opacity without affecting a child element with html/css?
body: <p>I want to achieve this using html and css:</p>
  
  <p><img src="https://i.stack.imgur.com/75KeA.png" alt="schema"></p>
  
  <p>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.</p>
  
  <p><a href="http://jsfiddle.net/yT6nG/">jsFiddle of my try here</a></p>
  
  <p>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).</p>