但是，自定义属性允许您将十六进制值转换为RGB三元组以与rgba()一起使用，将该值存储在自定义属性中(包括逗号！)，使用var()将该值替换为rgba()函数你想要的alpha值，它只会起作用：

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240,240,240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color),0.5);
}

<p id="element">If you can see this,your browser supports custom properties.</p>

这看起来好得令人难以置信.1它是如何运作的？

神奇之处在于，在计算该属性的值之前，在替换属性值中的var()引用时，自定义属性的值将被替换。这意味着就自定义属性而言，示例中的–color值根本不是颜色值，直到var( – color)表达式出现在需要颜色值的某处(并且仅在该上下文中) )。从section 2.1的css变量规范：

The allowed Syntax for custom properties is extremely permissive. The <declaration-value> production matches any sequence of one or more tokens,so long as the sequence does not contain <bad-string-token>,<bad-url-token>,unmatched <)-token>,<]-token>,or <}-token>,or top-level <semicolon-token> tokens or <delim-token> tokens with a value of “!”.

For example,the following is a valid custom property:

06002

While this value is obvIoUsly useless as a variable,as it would be invalid in any normal property,it might be read and acted on by JavaScript.

和section 3：

If a property contains one or more var() functions,and those functions are syntactically valid,the entire property’s grammar must be assumed to be valid at parse time. It is only Syntax-checked at computed-value time,after var() functions have been substituted.

这意味着在计算声明之前，您在上面看到的240,240值将直接替换为rgba()函数。所以这：

#element {
  background-color: rgba(var(--color),0.5);
}

因为rgba()期望不少于四个以逗号分隔的数值，所以它最初看起来不是有效的CSS，因此：

#element {
  background-color: rgba(240,0.5);
}

当然，这是完全有效的CSS。

更进一步，您可以将alpha组件存储在自己的自定义属性中：

:root {
  --color: 240,240;
  --alpha: 0.5;
}

并用相同的结果代替它：

#element {
  background-color: rgba(var(--color),var(--alpha));
}

这允许您具有不同的alpha值，您可以在运行中进行交换。

1嗯，如果您在不支持自定义属性的浏览器中运行代码段，那就是这样。