P粉4587250402023-08-21 13:13:49
您不能对现有的颜色值应用alpha通道。也就是说,您不能对现有的十六进制值(例如#f0f0f0
)添加alpha分量,并将结果值与另一个属性一起使用。
然而,自定义属性允许您将十六进制值转换为RGB三元组,以便与rgba()
一起使用,将该值存储在自定义属性中(包括逗号!),使用var()
将该值替换为具有所需alpha值的rgba()
函数,它将正常工作:
:root { /* #f0f0f0转换为十进制RGB */ --color: 240, 240, 240; } body { color: #000; background-color: #000; } #element { background-color: rgba(var(--color), 0.8); }
<p id="element">如果您能看到这个,说明您的浏览器支持自定义属性。</p>