sugarkeek · 2025 年 4 月 16 日 · 3649 次点击

又看到一篇感兴趣的英文文章，简单翻译了一下，

[仅用 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