之前看过一个浏览器滚动 页面元素往上走 到 header 上会像素化的那个

[qwertyzzz]

忘了地址了 求好心人

[sadyx]

https://element-plus.org/zh-CN/component/overview.html

[GPLer]

@sadyx 看了下是通过模糊等滤镜+叠加网格实现的，没想到这么简单

我搜索了一个通过 image-rendering: pixelated; 实现的，感觉效果差远了。（

https://juejin.cn/post/7174728517614043191

[qwertyzzz]

@sadyx 就是这个 我记得有个帖子的

[qwertyzzz]

@GPLer 之前有个帖子的 忘记在掘金还是 v 站看到的了

[GPLer]

@GPLer 而且这个还是针对图片的，对网页元素还没有效果（

[GPLer]

@qwertyzzz https://www.reddit.com/r/css/comments/17sdyiw/how_can_i_achieve_a_similar_transparency_effect/

reddit 上有一个，但应该不是你那个。

[qwertyzzz]

@GPLer #6 应该就是这个 但是如何在元素滚到到 header 下面 然后显示这个效果呢

[sakitamFDD]

```css
background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);
-webkit-backdrop-filter: saturate(50%) blur(4px);
```

[qwertyzzz]

@sakitamFDD 优秀！