又看到一篇感兴趣的英文文章,简单翻译了一下,
[仅用 CSS 实现极简的模糊图片占位符]( https://halo.chenkeyan.com/archives/fe-weekly-8-css-lqip)
其实简单来说就是,提取图片的几个主要颜色,用整数编码,通过 CSS 的计算属性计算成背景图片,实现模糊图片占位符。再细节一点就是怎么思考的,怎么解码的,怎么渲染成 LQIP 的等等。
效果可以看看:

英文原文在这: https://leanrada.com/notes/css-only-lqip/
可以看看作者的 demo:
https://leanrada.com/notes/css-only-lqip/gallery/
这是我复现的:
https://codepen.io/showmecode_ahh/pen/VYYwjZq
[仅用 CSS 实现极简的模糊图片占位符]( https://halo.chenkeyan.com/archives/fe-weekly-8-css-lqip)
其实简单来说就是,提取图片的几个主要颜色,用整数编码,通过 CSS 的计算属性计算成背景图片,实现模糊图片占位符。再细节一点就是怎么思考的,怎么解码的,怎么渲染成 LQIP 的等等。
效果可以看看:

英文原文在这: https://leanrada.com/notes/css-only-lqip/
可以看看作者的 demo:
https://leanrada.com/notes/css-only-lqip/gallery/
这是我复现的:
https://codepen.io/showmecode_ahh/pen/VYYwjZq
