V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
sugarkeek
V2EX  ›  CSS

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

  •  1
     
  •   sugarkeek · 50 天前 · 1107 次点击
    这是一个创建于 50 天前的主题,其中的信息可能已经有所发展或是发生改变。
    又看到一篇感兴趣的英文文章,简单翻译了一下,

    [仅用 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
    4 条回复    2025-04-17 09:46:17 +08:00
    FanyFull
        1
    FanyFull  
       50 天前 via Android
    好文,这个用在音乐网站的歌词背景颜色挺合适,颜色就从专辑照片中提取。
    blanu
        2
    blanu  
       50 天前
    好像不是动态获取颜色的,那每张图片都必须跑一次脚本来获取图片的占位信息吧
    sugarkeek
        3
    sugarkeek  
    OP
       50 天前
    @blanu 嗯嗯,这个主要是渲染的时候的优化
    sugarkeek
        4
    sugarkeek  
    OP
       50 天前
    @FanyFull 哈哈好主意
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2683 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 11:42 · PVG 19:42 · LAX 04:42 · JFK 07:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.