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

Question

一旦 div 出现，我想模糊整个背景。 我已经隐藏了 div，它会出现在按钮点击中。 在那个 div 外观上，整个背景应该是模糊的。 我怎样才能做到这一点？

Answer 1

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

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

我希望代码是不言自明的（ CodePen上的完整代码）。 但如果你想知道，它只是使用.backdrop定位在所有元素上的position: fixed; 和z-index:9998; . 然后使用z-index: 9999;将.except放置在.backdrop上； 它比.backdrop高一级但只使用position: relative; 所以它和以前一样在同一个地方。 你可以在任何你想要的地方拨打 position。

通过这种方式，您可以模糊除所需元素之外的所有内容，包括背景，并且如果您不想，则无需通过这种方式将.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");