CSS颜色透明设置简介

马黑黑

前端的颜色表达体系在 css3 里有好多种，只是有一些目前各大浏览器对其支持度跟不上，所以，本帖仅针对三种颜色表达体系简单介绍颜色透明度的设置方法：

一是十六进制；
二是RGB；
三是HSL。

一、十六进制

#000000 表示黑色，是十六进制颜色表达法的结构，# 是前缀，后面通常跟 6 位十六进制的数字。十六进制的数字有 0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F 共 16 个，它们以 6 个一组用来表示颜色，前面加符号 # 就是一个十六进制的颜色。

十六进制颜色可以带不透明度扩展表达，请看：

#00000075

在完整的十六进制的颜色结构之后，紧接着一个表示百分比的数字，用于表示不透明度，75 表示 75%，最低为 0，最高为 100。不透明度越低，颜色的透明度越高，反之亦然（后面两种颜色表达体系情形与此相同，不再赘述）。

虽然十六进制颜色支持不透明度，但精准度不是很好，一般不建议使用。

二、rgb颜色体系

rgb颜色表达体系中，r 代表 red（红色），g 代表 green（绿色），b 代表 blue（蓝色），红绿蓝以数字形式参与到最终颜色的调配中，每一种颜色取值范围从 0 开始到 255 至，值越大，该颜色的参与度越高，反之亦然。语法结构有两种表达方式，以黑色为例举个栗子：

    rgb(0 0 0)
    rgb(0,0,0)

给上述表达法加一个 alpha 值，简写为 a，则可将颜色加入了不透明度：

    rgba(0 0 0 / 50%)
    rgba(0,0,0,50%)


a 除了用百分比表示，也可以用 0 ~ 1 的值（包含 0 和 1）表示：

    rgba(0 0 0 / .5)
    rgba(0,0,0,.5)


三、hsl颜色体系

h 指色盘中的色相，从 0 到 360 值间取值（包含头尾值）；s  是饱和度，0% 为灰，100为全色；l 是亮度，0% 为黑，50% 正常，100% 为白色。语法结构举例如下：

    hsl(20 100% 50%)
    hsl(20,100%,50%)

和 rgb 颜色体系一样，也可以加 a 通道以表达不透明度：

    hsla(20 100% 50% / 50%)
    hsla(20,100%,50%,50%)


或用 0 ~ 1 的值表示 a  值：

    hsla(20 100% 50% / 0.5)
    hsla(20,100%,50%,0.5)


楼下的演示实例，可以通过调整上述三种颜色表达法的不透明度，从而得到颜色的透明度效果，注意观察颜色变成一定透明后背景色对它的影响，同时观察十六进制颜色透明度的缺陷。

马黑黑

十六进制白色透明色

RGB颜色白色透明色

HSL颜色白色透明色

十六进制不透明值 ：

50%

RGB 色系不透明值 ：

50%

HSL 色系不透明值 ：

50%

红影

后面一种知道，前面两种还不知道呢，原来都可以在设置颜色的时候，直接设置透明度啊。学习了

红影

又是一个可以在线调整和观看的效果，黑黑真棒

马黑黑

醉美水芙蓉 发表于 2023-7-19 21:26
谢谢黑黑老师详细分享讲解！

马黑黑

红影 发表于 2023-7-19 21:23
后面一种知道，前面两种还不知道呢，原来都可以在设置颜色的时候，直接设置透明度啊。学习了

这是颜色的透明度，与元素的 opacity 透明度不一样额。

元素透明度，会影响它其上的一切子元素，都跟着 opacity 值透明。颜色透明，只对使用了该元素的对象有效，比如文本色，或元素的背景色。

马黑黑

红影 发表于 2023-7-19 21:24
又是一个可以在线调整和观看的效果，黑黑真棒

这个简单的

红影

马黑黑 发表于 2023-7-19 22:14
这是颜色的透明度，与元素的 opacity 透明度不一样额。

元素透明度，会影响它其上的一切子元素，都跟 ...

嗯嗯，你2楼最后那行应该标注hsl吧，看你误标成rgb了

红影

马黑黑 发表于 2023-7-19 22:14
这个简单的

不简单啊，在线相互比较，更能明白你说的十六进制颜色支持不透明度的精准度不好。

马黑黑

红影 发表于 2023-7-19 23:39
不简单啊，在线相互比较，更能明白你说的十六进制颜色支持不透明度的精准度不好。

说完可以去测试一下

马黑黑

红影 发表于 2023-7-19 23:37
嗯嗯，你2楼最后那行应该标注hsl吧，看你误标成rgb了

谢谢。改过来了。

樵歌

喝个彩

马黑黑

樵歌 发表于 2023-7-20 07:07
喝个彩

谢喝

红影

马黑黑 发表于 2023-7-20 00:00
说完可以去测试一下

从进入帖子开始早就一个个测试过了啊

红影

马黑黑 发表于 2023-7-20 00:02
谢谢。改过来了。

这么小的事，谢什么啊

马黑黑

红影 发表于 2023-7-20 13:35
这么小的事，谢什么啊

不小，这可是关键性问题

马黑黑

红影 发表于 2023-7-20 13:25
从进入帖子开始早就一个个测试过了啊

额，那不错的

红影

马黑黑 发表于 2023-7-20 18:16
不小，这可是关键性问题

可是笔误呀，如果从头看起来都看得出来。

红影

马黑黑 发表于 2023-7-20 18:16
额，那不错的

特别喜欢这样可以在线操作的帖子。