2022年02月15日发布css3新增加的颜色模式有哪些
大家好，今日小科来聊聊一篇关于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透明度。
一、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%) 红色
<style type="text/css"> body{background:rgba(0,0,255,0.5);} div{width:300px; height:300px; background:hsl(140,50%,50%); position:absolute; top:0; left:0; }</style><body> <div></div></body>
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) 红色
<style> body{background:HSL(0,100%,50%)} div{width:300px; height:300px; background:HSLA(230,100%,50%,0); position:absolute; top:0; left:0; } </style> </head> <body> 猜猜我在哪里 <div></div> </body>
三、其他属性
1、transparent
特殊颜色值,表示透明色。可以直接当做颜色使用。
例如：color:transparent 设定字体颜色为透明
<style type="text/css"> body{background:hsl(270,100%,50%)} p{ font-size:50px; font-family:"黑体"; /*浏览器私有属性*/ -webkit-text-fill-color:transparent;/*设置文本透明*/ /*使用rgba(0,0,0,0);也可以实现全透明模式*/ -webkit-text-stroke:2px yellow;/*将文本设置透明，再设置个边框后就实现镂空字了*/ /*W3C标准属性*/ /*text-fill-color:transparent;*/ /*text-stroke:2px yellow;*/ }</style><body> <p>2012年过去了，最忙的是元芳，你怎么看？</p></body>
2、Opacity属性
作用：设定元素的透明度。
取值：0~1之间
注意：对于尚不支持opacity属性的IE浏览器
滤镜：filter:alpha(opacity=50) 仅限IE
<style> body{background:red} div{background:blue; width:300px; height:300px; opacity:0.5; position:absolute; top:0; left:0 }</style></head><body> 看到我你就成功了 <div></div></body>
四、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、模拟渐变效果
使用透明度来模拟渐变
<style> div{height:30px} div:nth-child(1){background:HSLA(120,100%,50%,0.1)} div:nth-child(2){background:HSLA(120,100%,50%,0.2)} div:nth-child(3){background:HSLA(120,100%,50%,0.3)} div:nth-child(4){background:HSLA(120,100%,50%,0.4)} div:nth-child(5){background:HSLA(120,100%,50%,0.5)} div:nth-child(6){background:HSLA(120,100%,50%,0.6)} div:nth-child(7){background:HSLA(120,100%,50%,0.7)} div:nth-child(8){background:HSLA(120,100%,50%,0.8)} div:nth-child(9){background:HSLA(120,100%,50%,0.9)} div:nth-child(10){background:HSLA(120,100%,50%,1.0)}</style></head><body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></body>
使用饱和度模拟渐变
<style> div{height:30px} div:nth-child(1){background:HSLA(120,100%,50%,1)} div:nth-child(2){background:HSLA(120,90%,50%,1)} div:nth-child(3){background:HSLA(120,80%,50%,1)} div:nth-child(4){background:HSLA(120,70%,50%,1)} div:nth-child(5){background:HSLA(120,60%,50%,1)} div:nth-child(6){background:HSLA(120,50%,50%,1)} div:nth-child(7){background:HSLA(120,40%,50%,1)} div:nth-child(8){background:HSLA(120,30%,50%,1)} div:nth-child(9){background:HSLA(120,20%,50%,1)} div:nth-child(10){background:HSLA(120,10%,50%,1)} </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body></html>
使用亮度来实现模拟渐变
<style> div{height:30px} div:nth-child(1){background:HSLA(120,100%,100%,1)} div:nth-child(2){background:HSLA(120,100%,90%,1)} div:nth-child(3){background:HSLA(120,100%,80%,1)} div:nth-child(4){background:HSLA(120,100%,70%,1)} div:nth-child(5){background:HSLA(120,100%,60%,1)} div:nth-child(6){background:HSLA(120,100%,50%,1)} div:nth-child(7){background:HSLA(120,100%,40%,1)} div:nth-child(8){background:HSLA(120,100%,30%,1)} div:nth-child(9){background:HSLA(120,100%,20%,1)} div:nth-child(10){background:HSLA(120,100%,10%,1)}</style></head><body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></body>
使用背景颜色：
<style>#div1 { width:200px; height:200px; border:1px solid #333;background:-moz-linear-gradient(top, red, yellow);background:-webkit-linear-gradient(top, red, yellow);background:-ms-linear-gradient(top, red, yellow);background:linear-gradient(top, red, yellow);-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=red, endColorstr=yellow)"; background:#f9f9f9;/*兼容IE9,8,7*/}</style></head><body><div id="div1"></div></body>
这篇好文章是转载于：知行礼动
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 知行礼动
- 本文地址： /news/detail/tanhcaejcj
