首页
注册
登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请
登录
Can I use?
›
http://caniuse.com/
Less
›
http://lesscss.org
Cool Libraries
›
Bootstrap from Twitter
›
Jetstrap
广告
赤友DiskGeeker
赤友DiskGeeker支持一键清理系统垃圾,采用AI深度清理,智能分析磁盘空间,直观展示文件和文件夹大小,便于管理与释放存储空间。
免费试用
Promoted by
editorsiboysoft
PRO
V2EX
›
CSS
技术文章翻译: CSS 实现极简的 LQIP
1
sugarkeek
·
87 天前
· 1304 次点击
这是一个创建于 87 天前的主题,其中的信息可能已经有所发展或是发生改变。
又看到一篇感兴趣的英文文章,简单翻译了一下,
[仅用 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
CSS
LQIP
模糊图片占位符
4 条回复
•
2025-04-17 09:46:17 +08:00
1
FanyFull
87 天前 via Android
好文,这个用在音乐网站的歌词背景颜色挺合适,颜色就从专辑照片中提取。
2
blanu
87 天前
好像不是动态获取颜色的,那每张图片都必须跑一次脚本来获取图片的占位信息吧
3
sugarkeek
OP
87 天前
@
blanu
嗯嗯,这个主要是渲染的时候的优化
4
sugarkeek
OP
87 天前
@
FanyFull
哈哈好主意
关于
·
帮助文档
·
自助推广系统
·
博客
·
API
·
FAQ
·
实用小工具
·
2476 人在线
最高记录 6679
·
Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 28ms ·
UTC 05:14
·
PVG 13:14
·
LAX 22:14
·
JFK 01:14
Developed with
CodeLauncher
♥ Do have faith in what you're doing.
❯