|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 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)
楼下的演示实例,可以通过调整上述三种颜色表达法的不透明度,从而得到颜色的透明度效果,注意观察颜色变成一定透明后背景色对它的影响,同时观察十六进制颜色透明度的缺陷。
|
评分
-
| 参与人数 4 | 威望 +145 |
金钱 +290 |
经验 +145 |
收起
理由
|
花飞飞
| + 15 |
+ 30 |
+ 15 |
赞一个! |
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
醉美水芙蓉
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|