仅模糊容器背景答案

【问题标题】：Blur container background only仅模糊容器背景
【发布时间】：2015-12-20 02:42:50
【问题描述】：

我有一个带有如下标记的网页：

<body>
    <div>Some content</div>

    <div class="login">
        <form>
            <div>Some form elements</div>
        </form>
    </div>

    <div>Some content</div>
</body>

我的body 元素上有一张背景图片。

我希望.login div 的背景是底层主体背景图像的模糊表示。

我在网上找到的解决方案遇到的问题是将模糊 div 的背景设置为与 body 相同。这样做的问题是我在 body 元素上使用了background-size: cover，所以我无法将模糊 div 的背景定位在正确的位置。

另一个问题是模糊的 div 的内容总是覆盖了模糊的背景。

是使用纯 css 还是借助 javascript 来实现此目的的一种方法？

【问题讨论】：

在这里试试这个答案stackoverflow.com/questions/19375311/…

标签： css background blur

【解决方案1】：

您不能使用纯 css，但可以使用 htmltocanvas 来实现，如 here 所述。

【讨论】：