如何使div的背景模糊？

Question

好的，现在我一直在 StackOverflow 上搜索类似的问题，但没有一个真正适合我的情况。所以我有一个覆盖整个网页的背景图像，在中心，我有一个包含其他一些子 div（带有登录表单、一些段落等）的 div。我想要的是只模糊那部分与 div 重叠的背景图像。图片：

所以我只想模糊红色矩形中的图像部分。如果我只是向主 div 添加一个模糊过滤器，它只会模糊它的内容（文本和表单）。另外，请记住，背景图片不是 div 的背景，而是整个页面的背景。

Answer 1

background-color: rgba(0, 0, 0, 0.61);

backdrop-filter: blur(5px);

一些解释： background -filter仅用于制作屏幕指定部分/咏叹调的背景，您可以使用它来划分 div、图像和某些元素。 background-color是可选的，并不总是必要的，以防你想让背景模糊更暗。支持 Firefox、Safari 和 Chrome。在此处查看文档https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter

Answer 2

试试这个，也许有用，

<div class="blur"></div>

<style>
.blur {
width:100%;
height:100%;
background-size:cover;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
-o-filter: blur(4px);
filter: blur(4px);
}
</style>