Web前端——HTML颜色

最新推荐文章于 2024-04-29 17:00:51 发布

巧克力code

最新推荐文章于 2024-04-29 17:00:51 发布

阅读量2.2k

点赞数

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/qq_44853882/article/details/108871153

版权

Web前端专栏收录该内容

15 篇文章 5 订阅

订阅专栏

一. 颜色值

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标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色

具体颜色见此网站

巧克力code

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Web前端——HTML颜色

一. 颜色值HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。这个表格给出了由三种颜色混合而成的具体效果：三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。1. 使用颜色的三种方法<!DOCTYPE html><html><head> <meta charset="utf-8
复制链接

扫一扫