模糊除特定div之外的所有内容

Question

我想在div出现后模糊整个背景。我已经隐藏了div，它将出现在按钮点击中。在div的外观上，整个背景应该是模糊的。我该怎么做？

Answer 1

如果您向我们提供您正在使用的代码，那会更好。尽管如此，请查看以下内容。它可能会对你有所帮助。

可以使用backdrop-filter: blur()而不是filter: blur()来确保.backdrop后面的元素是模糊的，而不是元素本身。

我希望代码是不言自明的(CodePen上的完整代码(。但是，如果您想知道，它只是位于使用position: fixed;和z-index:9998;的所有元素之上的.backdrop。然后使用比.backdrop高一级的z-index: 9999;将.except放置在.backdrop之上，但仅使用position: relative;，因此它与以前处于相同的位置。你可以把它放在任何你想放的地方。

通过这种方式，您可以模糊除所需元素外的所有内容，包括背景，如果不想，则无需将.except元素重新定位到其他位置。

如果你需要更多的澄清，请告诉我。

.except {
background: white;
position: relative;
z-index: 9999;
}
.backdrop {
position: fixed;
z-index: 9998;
top: 0; bottom: 0; left: 0; right: 0;
background: #33333377;
backdrop-filter: blur(4px);
}

<div class="wrap">
<div class="content">Some text</div>  
<div class="content except">Some text</div>  
<div class="content">Some text</div>
<div class="content">Some text</div> 
</div>
<div class="backdrop"></div>

CodePen 上的完整代码演示

Answer 2

您可以执行以下

在您的css 中

.blur {
filter: blur(5px);
}

javascript文件

document.querySelector("*").classList.add("blur");
document.querySelector("div_id").classList.remove("blur");