css如何设置透明度的颜色

这篇文章给大家分享的是有关css如何设置透明度的颜色的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

方法:1、使用RGBA()函数,使用红,绿,蓝,透明度的叠加来生成各式各样的颜色,语法”RGBA(红,绿,蓝,透明度)”;2、使用HSLA()函数,使用色相,饱和度,亮度,透明度来定义颜色,语法”HSLA(色相,饱和度,亮度,透明度)”。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强>方法1:使用RGBA()函数

RGBA()函数使用红(R)、绿(G),蓝(B),透明度(A)的叠加来生成各式各样的颜色。

语法:

RGBA(红色,绿色,蓝色,,α)

属性值:

值描述红色 定义红色值,取值范围为0 ~ 255,也可以使用百分比0% ~ 100%。绿色 定义绿色值,取值范围为0 ~ 255,也可以使用百分比0% ~ 100%。蓝色 定义蓝色值,取值范围为0 ~ 255,也可以使用百分比0% ~ 100%。α-透明度定义透明度0(完全透明)~ 1(完全不透明)

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style> 　　# p1  {background: rgb (255 0, 0, 0.3);} 　　# p2  {background: rgb (0255 0, 0.3);} 　　# p3  {background: rgb (0.3 0 0255);} 　　# p4  {background: rgb (192192192, 0.3);} 　　# p5  {background: rgb (255255 0, 0.3);} 　　# p6  {background: rgb (255、0255、0.3);} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; p> RGB 颜色,并使用透明度:& lt;/p> 　　& lt; p  id=皃1"祝辞红色& lt;/p> 　　& lt; p  id=皃2"祝辞绿色& lt;/p> 　　& lt; p  id=皃3"祝辞蓝色& lt;/p> 　　& lt; p  id=皃4"祝辞灰色& lt;/p> 　　& lt; p  id=皃5"祝辞黄色& lt;/p> 　　& lt; p  id=皃6"祝辞樱桃色& lt;/p> 　　& lt;/body> 　　& lt;/html>

效果图:

<强>方法2:使用HSLA()函数

HSLA()函数使用色相,饱和度,亮度,透明度来定义颜色。

HSLA即色相,饱和度,亮度,透明度(英语:色相、饱和度、明度,α)。

<李>

色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色,黄色等。

<李>

饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0 - 100%的数值。

<李>

亮度(L)取0 - 100%,增加亮度,颜色会向白色变化,减少亮度,颜色会向黑色变化。

<李>

透明度(A)取值0 ~ 1之间,代表透明度。

语法:

HSLA(饱和度、色调,还以为,轻盈,α)

属性值:

值描述色调,色相定义色相(0到360)- 0(或360)为红色,120为绿色,240为蓝色饱和——饱和度定义饱和度;0%为灰色,100%全色明度——亮度定义亮度0%为暗,50%为普通,100%为白α-透明度定义透明度0(透完全明)~ 1(完全不透明)

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style> 　　# p1  {background: hsla (120100%、50%、0.3);} 　　# p2  {background: hsla (120100%、75%、0.3);} 　　# p3  {background: hsla (120100%、25%、0.3);} 　　# p4  {background: hsla(120年,60%,70%,0.3);} 　　# p5  {background: hsla (290100%、50%、0.3);} 　　# p6  {background: hsla(290年,60%,70%,0.3);} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; p> HSL 颜色,并使用透明度:& lt;/p> 　　& lt; p  id=皃1"祝辞绿色& lt;/p> 　　& lt; p  id=皃2"祝辞浅绿& lt;/p> 　　& lt; p  id=皃3"祝辞暗绿& lt;/p> 　　& lt; p  id=皃4"祝辞柔和的绿色& lt;/p> 　　& lt; p  id=皃5"祝辞紫色& lt;/p> 　　& lt; p  id=皃6"祝辞柔和的紫色& lt;/p> 　　& lt;/body> 　　& lt;/html>

效果图:

感谢各位的阅读!关于“css如何设置透明度的颜色”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

css如何设置透明度的颜色