这是一篇技术文, 用纯 CSS 的方案给网页上的图片实现模糊图片占位符功能, 效果看图1

其实这个功能现在有好几个解决方案, 只不过这些方案要么需要 wrapper element, 要么需要加入复杂的 inline css, 要么需要加载一个 js 文件.

这个方案是利用纯 CSS 方法, 只需要给图片添加一个自定义属性 –lqip 即可.

图 1 中间是纯 CSS 方法的效果, 右边是基于 js + data 属性的 BlurHash 方案的效果, 左边是原图.

可以看出来效果基本和 BlurHash 差不多.

感兴趣的可以去原文查看更多技术细节.

🫘 : https://ouo.io/vi611Q