CSS: 在背景色为var()的情况下如何设置背景透明度？

Question

有个div，它的背景色通过var(--xxx)指定（其中-xxx为rgb或hsl格式的颜色），如何在此基础上再设置背景透明度？（只改变背景的透明度，但是里面的内容是不需要透明的。）

Answer 1

需要根据情况具体分析，列一下方案：

1. 直接使用 rgba 或 hsla 形式，如 rgba(255, 0, 0, 0.6)。
2. 使用十六进制色值也可以同时指定透明度，如 #0996 或 #00999966。
3. 使用伪元素来充当背景。

这才发现，没有 background-opacity 属性，而使用 opacity 和 filter: opacity() 会影响到元素整体。

Answer 2

把 rgb 或者 hsl 改成 rgba 或者 hsla 就可以
多加一个 alpha 的值即可

Answer 3

单纯用CSS去计算并不行。要么一开始就用CSS预处理器来定义变量，这样就可以使用内部函数直接计算了。
要么考虑用伪类去做背景色？这样就可以直接使用 opacity 属性。

Answer 4

目前还不行。
纯CSS的话只能通过这种方式进行拆分组合

:root{
    --r: 0;
    --g: 0;
    --b: 0;
    --color1: rgba(var(--r),var(--g),var(--b),1)
    --color2: rgba(var(--r),var(--g),var(--b),.5)
}