Эффект размытия на фоне, но только за наложением?

Question

Я хочу, чтобы div появлялся, как будто размывает фоновое изображение страницы. Должен работать при изменении позиции div. Рассмотрим изменение размера окна.

Answer 1

Я смог придумать опрятное решение, которое не требует js. Техника была использовать ту же Backgroud с определенными общими установками

JSFIDDLE

HTML:

<div class="mydiv"> 
    <div class='bgblur'></div> 
</div> 

CSS:

body { 
    background: url('/etc/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

.bgblur { 
    background: url('/etc/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
    -webkit-filter: blur(26px); 
    -moz-filter: blur(26px); 

    position: absolute; 
    height: 100%; 
    width: 100%; 
    z-index: -1; 
} 

.mydiv { 

    position: relative; 
    overflow: hidden; 

    // not necessary 
    border: 2px solid black; 
    height: 200px; 
    width: 200px; 
}