非零基础自学前端最后一遍一 HTML+CSS 5 额外知识补充2 5.3 CSS的颜色各种表示方法

桃扇骨 2024-03-25 09:26 29阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  5 额外知识补充2
         *   *  5.3 CSS的颜色各种表示方法
             *   *  5.3.1 CSS颜色的表示方法
                 *  5.3.2 RGB的表示方法

![在这里插入图片描述][229dc63cec914acd959d21e1afc61209.png_pic_center]

#### 一 HTML+CSS ####

#### 5 额外知识补充2 ####

##### 5.3 CSS的颜色各种表示方法 #####

###### 5.3.1 CSS颜色的表示方法 ######

*  在CSS中，颜色，有以下几种表示方法：
 *  颜色关键字（color keywords）：
    
     *  是不区分大小写的标识符，它表示一个具体的颜色；
     *  可以表示哪些颜色呢？
        
         *  https://developer.mozilla.org/zh-CN/docs/Web/CSS/color\_value\#%E8%AF%AD%E6%B3%95
        
        ![在这里插入图片描述][e4f917b991db4a2f8e2f23953ac8e0a3.png_pic_center]
 *  RGB颜色：
    
     *  RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；
        
         *  也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；
     *  RGB各个原色的取值范围是 0~255；

![在这里插入图片描述][ba46a416a0584ea6b2ceb6c5e78a7a88.png_pic_center]

###### 5.3.2 RGB的表示方法 ######

RGB颜色可以通过以\#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。

*  方式一：十六进制符号：\#RRGGBB\[AA\]
    
     *  R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。
        
        比如，\#ff0000等价于\#ff0000ff；
 *  方式二：十六进制符号：\#RGB\[A\]
    
     *  R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；
     *  三位数符号（\#RGB）是六位数形式（\#RRGGBB）的减缩版。
        
        比如，\#f09和\#ff0099表示同一颜色。
     *  四位数符号（\#RGBA）是八位数形式（\#RRGGBBAA）的减缩版。
        
        比如，\#0f38和\#00ff3388表示相同颜色。
 *  方式三：函数符： rgb\[a\](R, G, B\[, A\])
    
     *  R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%。
     *  A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

[229dc63cec914acd959d21e1afc61209.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bcb4af8224a147bfb55b12d6cca4d856.png
[e4f917b991db4a2f8e2f23953ac8e0a3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6121d0a9e8c84f539b3b1db5b66604f5.png
[ba46a416a0584ea6b2ceb6c5e78a7a88.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d71239a5640c48b7ae250a68a2e94c63.png