• 0

  • 480

Web前端——HTML颜色

猿人不正经

不想写代码

3星期前

一. 颜色值

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

这个表格给出了由三种颜色混合而成的具体效果:

在这里插入图片描述
三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。

1. 使用颜色的三种方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>颜色值</title>
</head>

<body>

    <p style="background-color:#FFFF00">
        通过十六进制设置背景颜色
    </p>
        
    <p style="background-color:rgb(255,255,0)">
        通过 rbg 值设置背景颜色
    </p>
        
    <p style="background-color:yellow">
        通过颜色名设置背景颜色
    </p></body>

</html>

在这里插入图片描述

2. RGBA

RGBA 的意思是(Red-Green-Blue-Alpha)它是在 RGB 上扩展包括了 “alpha” 通道,运行对颜色值设置透明度。

相对于使用 rgb(255,255,0),使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能,这里的 0.5 表示透明度,范围 0~1,0 表示全透明。

通常我们为了省略一个 0

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>RGBA</title>
</head>

<body>

    <p style="background-color:rgb(255,255,0)">
        通过 rbg 值设置背景颜色
    </p>

    <p style="background-color:rgba(255,255,0,0.25)">
        通过 rbg 值设置背景颜色
    </p>

    <p style="background-color:rgba(255,255,0,0.5)">
        通过 rbg 值设置背景颜色
    </p>

    <p style="background-color:rgba(255,255,0,0.75)">
        通过 rbg 值设置背景颜色
    </p></body>

</html>

在这里插入图片描述

3. 颜色名

目前所有浏览器都支持以下颜色名。

141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值

17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色

具体颜色见此网站

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

html

480

相关文章推荐

未登录头像

暂无评论