仅模糊容器背景

Question

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

<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 元素上使用了 background-size: cover，所以我无法将模糊 div 的背景定位在正确的位置。

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

有没有一种方法可以使用简单的 css 或借助 javascript 来实现？

Answer 1

您不能使用纯 css 但可以使用 htmltocanvas 实现 here。

仅模糊容器背景

Blur container background only

css

background

blur