背景上的模糊效果，但只在覆蓋後面？

Question

我希望div顯示爲模糊頁面的背景圖像。當div職位更改時應該工作。考慮調整窗口大小。

Answer 1

我能夠想出一個不需要js的整潔解決方案。該技術是利用具有特定共同設置

同一化背景

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; 
}