rgb()

rgb(255 255 255)
rgb(255 255 255 / .5)

此函数也接受旧版的语法，即所有的值都是用逗号分隔的。

函数标记：rgb(R G B[ / A])

R、G、B

每个都是从 0 到 255 之间的 <number> 值，或从 0% 到 100% 之间的 <percentage> 值，或者为关键字 none，分别代表红色、绿色和蓝色的通道。

A 可选

<alpha-value> 值或者关键字 none，数字 1 对应 100%（完全不透明）。

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>  

由于历史原因，rgb() 函数接受所有值用逗号分隔的形式。

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 0.5);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

结果

旧版的 rgba() 语法是 rgb() 的别称。

HTML

<div class="rgb"></div>
<div class="rgba"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.rgb {
  background-color: rgb(255 0 0 / 0.5);
}

div.rgba {
  background-color: rgba(255 0 0 / 0.5);
}

结果

• <color> 数据类型，以了解所有颜色标记的列表