纯 CSS 实现图片模糊占位图 | css only lqip
纯 CSS 实现图片模糊占位图 | css only lqip
页面内有广告，如果你看不到说明你在用广告拦截插件，为了网站能够持续运营，请顺手将本网站加到广告拦截白名单中，感谢！
这是一篇技术文, 用纯 CSS 的方案给网页上的图片实现模糊图片占位符功能, 效果看图1
其实这个功能现在有好几个解决方案, 只不过这些方案要么需要 wrapper element, 要么需要加入复杂的 inline css, 要么需要加载一个 js 文件.
这个方案是利用纯 CSS 方法, 只需要给图片添加一个自定义属性 --lqip 即可.
图 1 中间是纯 CSS 方法的效果, 右边是基于 js + data 属性的 BlurHash 方案的效果, 左边是原图.
可以看出来效果基本和 BlurHash 差不多.
感兴趣的可以去原文查看更多技术细节.
