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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

忘了地址了求好心人

9 条回复 • 2024-11-28 16:47:54 +08:00

sadyx

5 小时 7 分钟前

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

GPLer

5 小时 2 分钟前 via Android

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

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

https://juejin.cn/post/7174728517614043191

qwertyzzz

5 小时 2 分钟前

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

qwertyzzz

5 小时 1 分钟前

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

GPLer

5 小时 1 分钟前 via Android

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

GPLer

4 小时 57 分钟前 via Android

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

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

qwertyzzz

4 小时 45 分钟前

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

sakitamFDD

4 小时 16 分钟前

```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

4 小时 5 分钟前

@sakitamFDD 优秀！

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

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