CSS颜色透明设置简介
本帖最后由 马黑黑 于 2023-7-19 21:13 编辑前端的颜色表达体系在 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)
楼下的演示实例，可以通过调整上述三种颜色表达法的不透明度，从而得到颜色的透明度效果，注意观察颜色变成一定透明后背景色对它的影响，同时观察十六进制颜色透明度的缺陷。
本帖最后由 马黑黑 于 2023-7-20 00:04 编辑 <br /><br /><style>
#mydiv {
margin: auto;
padding: 20px;
width: 600px;
background: #000;
color: #fff;
font-size: 2.4em;
}
._16_opa { color: #ffffff50; }
.rgb_opa { color: rgba(255,255,255,50%); }
.hsl_opa { color: hsl(0,100%,100%, 50%); }
.frmSetOpacity {
margin: auto;
padding: 20px 0;
width: 640px;
font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
</style>
<div id="mydiv">
<p id ="txt16" class="_16_opa">十六进制白色透明色</p>
<p id="txtRgb" class="rgb_opa">RGB颜色白色透明色</p>
<p id="txtHsl" class="hsl_opa">HSL颜色白色透明色</p>
</div>
<form class="frmSetOpacity" oninput="out16.value=rng16.value + '%'; outRgb.value=rngRgb.value + '%'; outHsl.value=rngHsl.value + '%'">
<p>
<label for="rng16">十六进制不透明值 ：</label>
<input id="rng16" type="range" min="0" max="100" value="50" />
<output id="out16">50%</output>
</p>
<p>
<label for="rngRgb">RGB 色系不透明值 ：</label>
<input id="rngRgb" type="range" min="0" max="100" value="50" />
<output id="outRgb">50%</output>
</p>
<p>
<label for="rngHsl">HSL 色系不透明值 ：</label>
<input id="rngHsl" type="range" min="0" max="100" value="50" />
<output id="outHsl">50%</output>
</p>
</form>
<script>
!function() {
rng16.onchange = () => txt16.style.color = '#ffffff' + (rng16.value < 100 ? rng16.value : '');
rngRgb.onchange = () => txtRgb.style.color = 'rgba(255,255,255,' + rngRgb.value + '%)';
rngHsl.onchange = () => txtHsl.style.color = 'hsla(0,100%,100%,' + rngHsl.value + '%)';
}();
</script>
后面一种知道，前面两种还不知道呢，原来都可以在设置颜色的时候，直接设置透明度啊。学习了{:4_199:} 又是一个可以在线调整和观看的效果，黑黑真棒{:4_199:} 醉美水芙蓉 发表于 2023-7-19 21:26
谢谢黑黑老师详细分享讲解！
{:4_190:} 红影 发表于 2023-7-19 21:23
后面一种知道，前面两种还不知道呢，原来都可以在设置颜色的时候，直接设置透明度啊。学习了
这是颜色的透明度，与元素的 opacity 透明度不一样额。
元素透明度，会影响它其上的一切子元素，都跟着 opacity 值透明。颜色透明，只对使用了该元素的对象有效，比如文本色，或元素的背景色。 红影 发表于 2023-7-19 21:24
又是一个可以在线调整和观看的效果，黑黑真棒
这个简单的 马黑黑 发表于 2023-7-19 22:14
这是颜色的透明度，与元素的 opacity 透明度不一样额。
元素透明度，会影响它其上的一切子元素，都跟 ...
嗯嗯，你2楼最后那行应该标注hsl吧，看你误标成rgb了{:4_173:} 马黑黑 发表于 2023-7-19 22:14
这个简单的
不简单啊，在线相互比较，更能明白你说的十六进制颜色支持不透明度的精准度不好。 红影 发表于 2023-7-19 23:39
不简单啊，在线相互比较，更能明白你说的十六进制颜色支持不透明度的精准度不好。
说完可以去测试一下 红影 发表于 2023-7-19 23:37
嗯嗯，你2楼最后那行应该标注hsl吧，看你误标成rgb了
谢谢。改过来了。 喝个彩{:4_199:} 樵歌 发表于 2023-7-20 07:07
喝个彩
谢喝 马黑黑 发表于 2023-7-20 00:00
说完可以去测试一下
从进入帖子开始早就一个个测试过了啊{:4_173:} 马黑黑 发表于 2023-7-20 00:02
谢谢。改过来了。
这么小的事，谢什么啊{:4_173:} 红影 发表于 2023-7-20 13:35
这么小的事，谢什么啊
不小，这可是关键性问题 红影 发表于 2023-7-20 13:25
从进入帖子开始早就一个个测试过了啊
额，那不错的 马黑黑 发表于 2023-7-20 18:16
不小，这可是关键性问题
可是笔误呀，如果从头看起来都看得出来。 马黑黑 发表于 2023-7-20 18:16
额，那不错的
特别喜欢这样可以在线操作的帖子。{:4_199:}