技术文章翻译： CSS 实现极简的 LQIP

[sugarkeek]

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

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

[FanyFull]

好文，这个用在音乐网站的歌词背景颜色挺合适，颜色就从专辑照片中提取。

[blanu]

好像不是动态获取颜色的，那每张图片都必须跑一次脚本来获取图片的占位信息吧

[sugarkeek]

@blanu 嗯嗯，这个主要是渲染的时候的优化

[sugarkeek]

@FanyFull 哈哈好主意