模糊背景效果但仅在叠加层后面？

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