当前位置：首页 > 科技 > 软件

CSS 中 Rgb 与 Rgba 的进化史

来源：责编：时间：2023-11-28 09:35:56 162观看

导读提到颜色，大家都能想到 rgb 颜色表示法，比如 rgb(255,0,0)就表示红色，如果希望有透明度，可以用rgba来表示，比如rgba(255,0,0,.5)就表示透明度为50%的红色。除了这些，你还知道哪些？还有哪些新的写法，兼容性如何？今天一起来聊聊

提到颜色，大家都能想到 rgb 颜色表示法，比如 rgb(255,0,0)就表示红色，如果希望有透明度，可以用rgba来表示，比如rgba(255,0,0,.5)就表示透明度为50%的红色。

除了这些，你还知道哪些？还有哪些新的写法，兼容性如何？今天一起来聊聊 rgb 和 rgba 的发展史。

一、IE8 之前（2012前）

我最早工作是需要兼容 IE6 的，所以对这块还算熟悉。

在这个时代，只有rgb，没有rgba，也就是这种最原始的写法。

rgb(255,0,0)

因此如果要实现透明度颜色，要么整体透明，要么切图，是一件非常头疼的事。

兼容性如下，全兼容。

二、IE9 ~ Safari 12（2019前）

为了解决透明度的问题，从 IE9 开始支持rgba颜色表示法，这里的a就是alpha，也就是透明的意思。

rgba(255,0,0,.5)

这个阶段应该是目前绝大多数前端开发都经历的时期，由于这段时期，JS框架发展迅猛，导致很多同学误以为CSS 颜色就到此为止了，反正平时的开发也够用。

需要注意的是，rgba这里的透明度是必须的，即使是1也要写上。

/*旧浏览器不支持*/rgba(255,0,0) /*正确的写法*/rgba(255,0,0,1)

还有为啥是 Safari 12呢？因为从Safari 12.1开始支持新的rgb颜色，并且是主流浏览器中支持最晚的。

兼容性如下，IE9 以上全兼容。

三、Safari 12.1 ~ 至今（2019以后）

接下来就是 CSS Color Level 4 的更新，颜色表示变得极其自由，非常离谱，也是大多数同学没有注意到的一次变革。

最大的特征是去除了逗号，改用空格作为分隔符，还支持透明度可选，如果有透明度，就用斜杠/来区分。

rgb(255 0 0)rgb(255 0 0 / .5)

由于 CSS极其强大的向后兼容性，因此也保留了以前逗号的写法。

rgb(255,0,0)rgb(255,0,0,.5)

另外，还有一点比较隐晦，就是透明度alpha还支持了百分比格式，注意是「透明度」，其他值旧语法就支持。

rgb(255 0 0 / 50%)rgb(100% 0% 0% / 50%)

注意，这里的0必须也写成0%，也就是r、g、b的形式必须统一，要么都是数值，要么都是百分比，但是和透明度可以不一致，例如：

/*以下合法*/rgb(100% 0% 0% / .5)rgb(255 0 0 / 50%)

更夸张的是，当用百分比表示时，空格也是可以省略的（当然并不推荐）。

rgb(100%0%0%/50%)

还支持一个关键词none，也就是0，几乎没啥用。

rgb(255 0 0 / none)

有人可能觉得奇怪，既然rgb也支持透明度了，那rgba干嘛去了？

没错，现在 rgba() 语法相当于是 rgb() 的别称，完全是一模一样的，写不写a都一样。

rgba(255 255 255)rgba(255 255 255 / .5)rgba(255,0,0)rgba(255,0,0,.5)rgba(100% 0% 0%)rgba(100% 0% 0% / 50%)rgba(100% 0% 0% / .5)rgba(255 0 0 / 50%)

兼容性如下，主要是 safari 12.1还有点不放心。

怎么样，是不是都记住了？下面来看两道选择题

四、简单测试一下

第一题，请问下面哪些颜色是合法的？

A. rgb(255, 0, 0, 2)B. rgb(255, 0, 0, -1)C. rgb(300, 0, 0, 1)D. rgb(100%, 0, 0, 1)E. rgb(255, 0, 0 / 100%)F. rgba(100%0%0%)G. rgba(255 0 0 1)

思考几分钟...

答案揭晓：合法的是A、B、C、F。

答案解析：
首先关于阈值，颜色处理非常灵活，比如透明度超过1就解析成1，小于0就解析成0，所以 A、B、C都是合法的。
其次，百分比和数值不能混用，所以D不合法。
然后逗号和/不能混用，所以E不合法。
接着，用百分比表示时可以省略空格，所以F合法。
最后，用空格分隔时，透明度需要用/区分，所以G不合法。

第二题，请问下面哪些颜色是CSS color 4新语法？(safari 12.1+支持)。

A. rgba(255, 0, 0，50%)B. rgba(100%, 0%, 0%, 50%)C. rgba(100%, 0%, 0%, .5)D. rgba(255, 0, 0)E. rgb(255 0 0)F. rgb(300, 0, 0, 1)G. rgb(100%, 0%, 0%)

思考几分钟...

答案揭晓：属于新语法的是A、B、D、E、F。

答案解析：
首先来看 rgba，只要透明度是百分比格式的，都是新语法，所以 A、B符合。
然后在旧语法中，rgba 中的透明度是必须的，可以省略的就是新语法，所以 D 也是新语法。
接着，新语法才支持空格作为分隔符，所以 E 也是新语法。
rgb 支持透明度也是新语法，所以 F 也符合。
其他就都是旧语法了。

怎么样，你答对了吗？

五、实际开发需要注意的

实际开发中，我相信绝大部分同学都会稳妥起见（可能是不知道有新语法），使用旧语法。

rgb(255,0,0)rgba(255,0,0,0)

大部分设计软件展示的也是这类旧语法，比如下面的 Figma。

正常情况下本来没什么事，用这些旧语法也满足需求。但有时候，一些 eslint 在不配置的情况下可能会自作主张的给你转换了（在 git 提交的时候转换），比如明明写的是 rgba 语法，结果被转成了 rgb。

rgba(255,0,0,0.5)/*eslint转换后*/rgb(255 0 0 /50%)

这个还好，比较容易发现，还有一种就比较隐晦了，比如下面这种。

rgba(255,0,0,0.5)/*eslint转换后*/rgba(255,0,0,50%)

仅仅是把透明度做了转换，这是个新语法，但是很难被发现，结果就有可能在低版本 ios （safari 12以下）出现颜色丢失。

当然这些 eslint 都是可以配置的，比如上面的这些问题可以用这样的配置来解决。

"color-function-notation": 'legacy',"alpha-value-notation": 'number'

但是，对于不熟悉这些配置的（比如我）简直就是灾难！

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-34639-0.htmlCSS 中 Rgb 与 Rgba 的进化史

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：程序员的创新思维：突破常规的思考方式

下一篇： DDD死党：内存Join--将复用和扩展用到极致

标签：

热门焦点

印度登月最关键一步！月船三号今晚进入环月轨道

8月5日消息，据印度官方消息，月船三号将于北京时间今晚21时30分左右开始近月制动进入环月轨道。这是该探测器能够成功的最关键步骤之一，如果成功将开始围
Automa-通过连接块来自动化你的浏览器

1、前言通过浏览器插件可实现自动化脚本的录制与编写，具有代表性的工具就是：Selenium IDE、Katalon Recorder，对于简单的业务来说可快速实现自动化的上手工作。Selenium IDEKat
不容错过的MSBuild技巧，必备用法详解和实践指南

一、MSBuild简介MSBuild是一种基于XML的构建引擎，用于在.NET Framework和.NET Core应用程序中自动化构建过程。它是Visual Studio的构建引擎，可在命令行或其他构建工具中使用
学习JavaScript的10个理由...

作者 | Simplilearn编译 | 王瑞平当你决心学习一门语言的时候，很难选择到底应该学习哪一门，常用的语言有Python、Java、JavaScript、C/CPP、PHP、Swift、C#、Ruby、Objective-
三言两语说透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术，可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化和反柯里化的概念、实现原理和应用
中国家电海外掘金正当时｜出海专题

作者｜吴南南编辑｜胡展嘉运营｜陈佳慧出品｜零态LT（ID：LingTai_LT）2023年，出海市场战况空前，中国创业者在海外纷纷摩拳擦掌，以期能够把中国的商业模式、创业理念、战略打法输出海外，他们依
大厂卷向扁平化

来源：新熵作者丨南枝编辑丨月见大厂职级不香了。俗话说，兵无常势，水无常形，互联网企业调整职级体系并不稀奇。7月13日，淘宝天猫集团启动了近年来最大的人力制度改革，目前已形成一
iQOO 11S新品发布会

iQOO将在7月4日19:00举行新品发布会，推出杭州亚运会电竞赛事官方用机iQOO 11S。
北京：科技教育体验基地开始登记

　　北京“科技馆之城”科技教育体验基地登记和认证工作日前启动。首批北京科技教育体验基地拟于2023年全国科普日期间挂牌，后续还将开展常态化登记。　　北京科技教育体验基