Web前端-8-css-颜色属性

最新推荐文章于 2024-04-18 14:13:00 发布

karry_孙二

最新推荐文章于 2024-04-18 14:13:00 发布

阅读量433

点赞数

分类专栏： Web前端基础

本文链接：https://blog.csdn.net/qq_39620483/article/details/84192757

版权

Web前端基础专栏收录该内容

29 篇文章 1 订阅

订阅专栏

css颜色属性

1.HSL属性

（1）HSL颜色:通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

H:Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。

S:Saturation(饱和度)。取值为：0.0% - 100.0%。

L:Lightness(亮度)。取值为：0.0% - 100.0%。

（2）例如： color: hsl(240,100%,50%);

2.HSLA属性

（1）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相同，只是在HSL模式上新增了Alpha透明度。

（2）例如：color:hsla(0,100%,50%,0.2);

3.RGB属性

（1）RGB颜色:红(R)、绿(G)、蓝(B)三个颜色通道的变化

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数 | 百分数

以上三个参数，正整数值得取值范围为：0-255，百分比数值的取值范围为：0.0%-100.0%，超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被解析rgb(255,0,0)

正整数值255对应百分比数值100%，如：rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF，RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。

（2）例如：color: rgb(200,100,0);

4.RGBA属性

（1）RGBA颜色:红(R)、绿(G)、蓝(B)、透明度(A)

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数 | 百分数

A:Alpha透明度。取值0~1之间

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

（2）例如：color: rgba(0,0,0,0.5); 图片透明度的设置

5.十六进制色彩的表示方式

颜色构成：红绿蓝

取值范围：0-9 a-f

6.英文单词

颜色构成：red blue green

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 颜色属性</title>
    <style type="text/css">
        #a{
            color:hsl(120,50%,50%);
        }
        #b{
            color: hsla(120,50%,50%,0.2);
        }
        #c{
            color: rgb(0,255,0);
        }
        #d{
            color:rgba(0,255,0,0.1);
        }
        #e{
            color: #000000;
        }
        #f{
            color:green;
        }
    </style>
</head>
<body>
    <p id="a">第1段hsl</p>
    <p id="b">第2段hsla</p>
    <p id="c">第3段rgb</p>
    <p id="d">第4段rgba</p>
    <p id="e">第5段16进制</p>
    <p id="f">第6段英文单词</p>
</body>
</html>

karry_孙二

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端-8-css-颜色属性

css颜色属性1.HSL属性（1）HSL颜色:通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。H:Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。S:Saturation(饱和度)。取值为：0.0% - 100.0%。L:Lightness(亮度)。...
复制链接

扫一扫