title: Background blur with CSS
body: <p>I want an <strong>Vista/7-aero-glass-style effect</strong> on a popup on my site, and it needs to be dynamic. I'm fine with this not being a cross-browser effect as long as the site still <em>works</em> on all modern browsers.</p>
  
  <p>My first attempt was to use something like</p>
  
  <pre class="lang-css prettyprint-override"><code>#dialog_base {
    background:white;
    background:rgba(255,255,255,0.8);
  
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
  }
  </code></pre>
  
  <p>However, as I should have expected, <strong>this resulted in the <em>content</em> of the dialog being blurred</strong> and the background staying clear. <strong>Is there any way to use CSS to blur the background of a semitransparent element instead of its contents?</strong></p>