CSS 颜色值

有几种方法可以在CSS中定义颜色值。

颜色关键字

彩色关键字是不区分大小写的标识符，该标识符表示特定的颜色，例如red，green，blue，yellow，black等。

示例

  h1 {
   color: red;
  }
  p {
   background-color: yellow;
  }

警告：对颜色关键字的支持因浏览器而异，因此，为了安全起见，最好使用十六进制或功能符号。

查看颜色关键字的完整列表

transparent关键字表示完全透明的颜色。

该关键字可以视为透明黑色的简写形式rgba(0,0,0,0)，也是它的计算值。

示例

  h1 {
   color: transparent;
  }
  p {
   background-color: transparent;
  }

注意： CSS 2.1仅允许两个属性，background-color和border-color接受transparent关键字。但是，CSS3扩展了颜色值以包括transparent关键字，以允许其与接受颜色值的所有属性一起使用。

RGB（红绿蓝）颜色模型是在CSS中定义颜色值的最常用方法。可以使用RGB模型以两种方式定义颜色：

十六进制表示法的RGB值#由紧随其后的三个或六个十六进制字符（0-9，af）的字符组成。

当使用六位符号（#rrggbb）时，第一对（rr）代表红色值，第二对（gg）代表绿色值，最后一对（bb）代表蓝色值。

示例

  h1 {
   color: #f80;
  }
  p {
   background-color: #ff8800;
  }

提示：三位十六进制表示法（#rgb）可以通过复制数字而不是加零来转换为六位形式（#rrggbb）。例如：#03f可以扩展为#0033ff，但是两个值表示相同的颜色。

函数表示法中的RGB值指定为:rgb(red, green, blue)。其中，每个参数(red，green和blue)定义颜色的强度，可以是一个整数值(从0到255)或一个百分比值(从0%到100%)。

整数值255对应100%，十六进制表示法中的f或ff：例如，rgb(0,255,255) = rgb(0%，100%，100%) = #0ff，所有值表示相同的颜色，即aqua。数值周围允许有空白。

示例

  h1 {
   color: rgb(0,255,255);
  }
  p {
   background-color: rgb(0%,100%,100%);
  }

值0或0％表示不存在特定颜色值，而值255、100％和f或ff表示该颜色值完全存在。

注意：超出有效范围（0-255或0%-100%）的值将被自动裁剪或更改为设备支持的范围内。

查看有关CSS3颜色的教程，以了解新的功能符号（例如）rgba()，hsl()以及hsla()用于定义颜色值的信息。