CSS 颜色（高级）

RGBA颜色

RGBA颜色值是RGB颜色值的扩展，带有alpha通道 - 指定颜色的不透明度。RGBA颜色值指定为：rgba（红色，绿色，蓝色，alpha）。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。

rgba（255,0,0,0.2）;

rgba（255,0,0,0.4）;

rgba（255,0,0,6.6）;

rgba（255,0,0,0.8）;

以下示例定义了不同的RGBA颜色：

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* 红色不透明度 */
                #p2 {background-color: rgba(0, 255, 0, 0.3);}  /* 绿色不透明度 */
                #p3 {background-color: rgba(0, 0, 255, 0.3);}  /* 蓝色不透明度 */

尝试一下

HSL颜色

HSL代表色调，饱和度和亮度。

HSL颜色值指定为：hsl（色调，饱和度，亮度）。

色调是色轮上的度数（从0到360）：
- 0（或360）为红色
- 120是绿色的
- 240是蓝色的
饱和度是一个百分比值：100％是全彩色。
亮度也是一个百分比; 0％为深色（黑色），100％为白色。

hsl（0,100％，30％）;

hsl（0,100％，50％）;

hsl（0,100％，70％）;

hsl（0,100％，90％）;

以下示例定义了不同的HSL颜色：

#p1 {background-color: hsl(120, 100%, 50%);}  /* 绿 */
                                #p2 {background-color: hsl(120, 100%, 75%);}  /* 浅绿 */
                                #p3 {background-color: hsl(120, 100%, 25%);}  /* 深绿 */
                                #p4 {background-color: hsl(120, 60%, 70%);}   /* 柔和的绿色 */

尝试一下

HSLA颜色

HSLA颜色值是HSL颜色值的扩展，带有alpha通道 - 指定颜色的不透明度。HSLA颜色值使用以下值指定：hsla（色调，饱和度，亮度，alpha），其中alpha参数定义不透明度。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。

hsla（0,100％，30％，0.3）;

hsla（0,100％，50％，0.3）;

hsla（0,100％，70％，0.3）;

hsla（0,100％，90％，0.3）;

以下示例定义了不同的HSLA颜色：

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* 绿色的不透明度 */
                        #p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 淡绿色的不透明度 */
                        #p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 深绿色的不透明度 */
                        #p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* 淡绿色的不透明度 */

尝试一下

不透明度

CSS opacity属性设置整个元素的不透明度（背景颜色和文本都是不透明/透明的）。opacity属性值必须在0.0（完全透明）和1.0（完全不透明）的数。

rgb（255,0,0）;不透明度：0.2;

rgb（255,0,0）;不透明度：0.4;

rgb（255,0,0）;不透明度：0.6;

rgb（255,0,0）;不透明度：0.8;

以下示例显示了具有不透明度的不同元素：

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 红与不透明度 */
                                #p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 绿色的不透明度*/
                                #p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 蓝色的不透明度 */

尝试一下

RGBA颜色

HSL颜色

HSLA颜色

不透明度

相关页面