html - 整页 div 叠加模糊不显示

Question

我是 Angular 元素的新手，我想将 Div 设置为组件以模糊所有页面大小

<div class="overlay"></div>
<div class="div-general">
  <!-- All <app-components> -->
</div>

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  filter: blur(4px);
  z-index: 2000;
}

Answer 1

CSS 的 filter:blur() 仅模糊目标 DOM 元素(及其子元素/子树)的内容。

即使您的叠加层具有更高的 z-index，它也不会影响 sibling 。

您可以通过以下任一方法解决此问题:

• 将 filter:blur() 应用于 .div-general，或者
• 在叠加层 div 上应用 filter:blur() 以外的内容，例如 backdrop-filter .

.div-general {
  filter: blur(4px);
}

<div class="overlay"></div>
<div class="div-general">
  <!-- All <app-components> -->
  <p>Sample text</p>
  Sample text Sample text Sample text Sample text Sample text
</div>