模糊过滤器 CSS 样式在 Safari + ios 移动设备上不起作用

Question

我花了很多时间寻找模糊滤镜样式问题的解决方案，该问题在 Safari 和 iOS 设备上不起作用。我需要为背景颜色添加模糊效果。它适用于除 iOS 移动设备和 Safari 之外的所有设备。谁能提供解决方案吗？

这是我迄今为止尝试过的代码。

    -moz-backdrop-filter: blur(10px);
    -ms-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

Answer 1

请将其添加到 CSS 伪元素 :after 或 :before :

#filter:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

<div id="filter">blur</div>