title: <div> blur of part of Background image with css
body: <p>I use this <a href="https://stackoverflow.com/questions/13168142/is-it-possible-to-use-webkit-filter-blur-on-background-image">Is it possible to use -webkit-filter: blur(); on background-image?</a> solution to make blurry backgroung image and it works great! But I want to make some <code>&lt;div&gt;</code> over background and make it blurry. So background should be clear and blurry under <code>&lt;div&gt;</code> only. If I move blur filter on that div it became blur, but background image still clear.</p>
  
  <p>HTML is simple:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div class = "background"&gt;&lt;/div&gt;
     &lt;div class = "content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS is:</p>
  
  <pre><code>.content{
      width: 70%;
      height: 70%;
      border:2px solid;
      border-radius:20px;
      position: fixed;
      top: 15%;
      left: 15%;
      z-index:10;
      background-color: rgba(168, 235, 255, 0.2);
      filter: blur(2px); 
      -webkit-filter: blur(2px);
      -moz-filter: blur(2px);
      -o-filter: blur(2px); 
      -ms-filter: blur(2px);
  }
  .background{
      width:100%;
      height:100%;
      background-image:url('http://www.travel.com.hk/region/time_95.jpg');
      z-index:0;
      position:absolute;
  }
  </code></pre>
  
  <p>Here is example <a href="http://jsfiddle.net/photolan/8gVGR/" rel="nofollow noreferrer">http://jsfiddle.net/photolan/8gVGR/</a></p>
  
  <p>So I need to blur background under content div only with CSS.</p>