2022年02月15日整理发布：css3中新增加的颜色模式有哪些
Css增加了三种新的颜色模式：1。RGBA模式，为RGB模式增加Alpha透明度，如“RGBA (255，0，0，0.5)”；2.HSL模式，例如“HSL (360，50%，50%)”；3.HSLA模式，为HSL模式增加Alpha透明度。
本教程操作环境：windows7系统，CSS3版本，戴尔G3电脑。
一、CSS12颜色表示(W3C标准)
(资料图片)
1、颜色名称颜色名称方法(用颜色关键词来表示对应的颜色。)
例如：红色、蓝色和粉色。
优点：方便、快捷、特定颜色准确。
缺点：
表示有限数量的颜色。
不支持不透明的颜色。
2.十六进制模式十六进制模式(用十六进制表示颜色)
语法：
#RRGGBB或#RGB值：
RR:红色值。十六进制正整数
GG:绿色价值。十六进制正整数
BB:蓝色值。十六进制正整数
取值范围为：00-FF。
示例：#FF0000红色#FFFF00黄色。
优点：意味着颜色种类多，使用方便。
缺点：
十六进制单位转换很成问题。
支持不透明颜色。
特定的颜色需要工具协调或一定的颜色混合知识。
3.RGB模式，三色配色模式
语法：
RGB值：
r:红色值。正整数|百分比
g:绿色值。正整数|百分比
b:蓝色值。正整数|百分比
取值范围为：0~255或0%~100%
例如：rgb(255，0，0)红色rgb(255，255，0)黄色
优点：意味着颜色种类多，使用方便。
缺点：
不支持透明颜色
特定的颜色需要工具协调或一定的颜色混合知识。
第二，CSS3增加了颜色表示
1.RGBA模式
除了将Alpha透明度添加到RGB模式之外，此颜色模式与RGB相同。
语法：
RGBA值(R，G，B，A):
r:红色值。正整数|百分比
g:绿色值。正整数|百分比
b:蓝色值。正整数|百分比
答：阿尔法透明度。该值介于0和1之间。
例如：rgba(255，0，0，0.5)半透明红色。
样式类型="text/css "
正文{background:rgba(255，0，0，1)}
div { width:300px
高度：300 px；
background:rgba(0，0，255，0.4)；
位置：绝对；
top:0
left:0
}
/style
身体
猜猜我在哪里。
分区/部门
/body2，HSL模式(色轮模式没有透明度)
语法：
高铁的价值：
h:色相。0(或360)表示红色，120表示绿色，240表示蓝色，其他数值可用于指定颜色。值：0-360
s:饱和度。该值为0。
.0% - 100.0%L： Lightness(亮度)。取值为：0.0% - 100.0%
例如:hsl(360,50%,50%) 红色
3、HSLA模式(色轮模式有透明度)
语法:
HSLA(H,S,L,A)取值：
H： Hue(色调)。–0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S： Saturation(饱和度)。取值为：0.0% - 100.0%
L： Lightness(亮度)。取值为：0.0% - 100.0%
A： Alpha透明度。取值0~1之间。
例如：hsl(360,50%,50%,0.5) 红色
猜猜我在哪里（学习视频分享：css视频教程）
三、其他属性
1、transparent
特殊颜色值,表示透明色。可以直接当做颜色使用。
例如：color:transparent 设定字体颜色为透明
2012年过去了，最忙的是元芳，你怎么看？
2、Opacity属性
作用：设定元素的透明度。
取值：0~1之间
注意：对于尚不支持opacity属性的IE浏览器
滤镜：filter:alpha(opacity=50) 仅限IE
看到我你就成功了四、CSS3 颜色使用实例
background-image: -ms-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Opera */ background-image: -o-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D35644), color-stop(1, #31264D)) !important;/* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #D35644 0%, #31264D 100%) !important; }1、模拟渐变效果
使用透明度来模拟渐变
使用饱和度模拟渐变