1link<p>纯 CSS 实现图片模糊占位图 | css only lqip </p><p>这是一篇技术文, 用纯 CSS 的方案给网页上的图片实现模糊图片占位符功能, 效果看图1</p><p>其实这个功能现在有好几个解决方案, 只不过这些方案要么需要 wrapper element, 要么需要加入复杂的 inline css, 要么需要加载一个 js 文件.</p><p>这个方案是利用纯 CSS 方法, 只需要给图片添加一个自定义属性 --lqip 即可.</p><p>图 1 中间是纯 CSS 方法的效果, 右边是基于 js + data 属性的 BlurHash 方案的效果, 左边是原图.</p><p>可以看出来效果基本和 BlurHash 差不多.</p><p>感兴趣的可以去原文查看更多技术细节.</p><p>🫘 : <a href="https://ouo.io/vi611Q" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">ouo.io/vi611Q</span><span class="invisible"></span></a> </p><p><a href="https://techhub.social/tags/1link1day" class="mention hashtag" rel="tag">#<span>1link1day</span></a></p>