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，但可以使用h here所述的htmltocanvas来实现。

仅模糊容器背景

1 个答案: