提到颜色，大家都能想到 rgb 颜色表示法，比如 rgb(255,0,0)就表示红色，如果希望有透明度，可以用rgba来表示，比如rgba(255,0,0,.5)就表示透明度为50%的红色。
除了这些，你还知道哪些？还有哪些新的写法，兼容性如何？今天一起来聊聊 rgb 和 rgba 的发展史。
我最早工作是需要兼容 IE6 的，所以对这块还算熟悉。
在这个时代，只有rgb，没有rgba，也就是这种最原始的写法。
rgb(255,0,0)因此如果要实现透明度颜色，要么整体透明，要么切图，是一件非常头疼的事。
兼容性如下，全兼容。
为了解决透明度的问题，从 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 以上全兼容。
接下来就是 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'但是，对于不熟悉这些配置的（比如我）简直就是灾难！
本文链接：http://www.28at.com/showinfo-26-34639-0.htmlCSS 中 Rgb 与 Rgba 的进化史
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 程序员的创新思维：突破常规的思考方式
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号