有关 Chrome 开发工具对颜色表示方法的替代

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1152 天前的主题，其中的信息可能已经有所发展或是发生改变。

我们都知道，标准的 css 语法中：

rgb() 是 3 个参数：rgb(red, green, blue) 代表标准颜色（不含透明度的）
rgba() 是 4 个参数：rgba(red, green, blue, alpha) 代表含透明度的颜色
#ffffff 或 #fff 是标准的 HEX 颜色值

但我刚发现，在 Chrome 开发工具里竟然支持这样的语法：

rgb(red, green, blue / alpha) 代表含透明度的颜色，例如：rgb(255,0,0 / 25%) 直接把 rgba() 给替代了
#ffffffxx 代表含透明度的颜色，例如：#aabbcc55 直接把 rgb() 与 rgba() 这种相对麻烦的写法都替代了

网上竟然搜不到相关介绍（主要是我不知道咋搜-_-!）

谁来分享一下？

好家伙，脸打的啪啪的(￣ε(#￣)☆╰╮(￣▽￣///)

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb()

Note: CSS Colors Level 4 made some changes to rgb(). In browsers that support the standard rgba() is an alias for rgb(), they accept the same parameters and behave the same way.

The Level 4 specification also allows for space-separated in addition to comma-separated values.

的确是新的语法升级

RGB

rgba

透明度

Green

2 条回复 • 2021-09-26 11:23:52 +08:00

HeyWeGo

2021-09-26 11:15:35 +08:00

之前对接 flutter 开发的时候发现他们写布局的时候是 #ffffffXX 这种写法。其中 XX 是十六进制表示不透明度的

zhihu.com/question/359420387/answer/927170739

ahu

2021-09-26 11:23:52 +08:00

中文版介绍也找到了：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value