您不能對現(xiàn)有的顏色值應用alpha通道。也就是說,您不能對現(xiàn)有的十六進制值(例如#f0f0f0
)添加alpha分量,并將結(jié)果值與另一個屬性一起使用。
然而,自定義屬性允許您將十六進制值轉(zhuǎn)換為RGB三元組,以便與rgba()
一起使用,將該值存儲在自定義屬性中(包括逗號!),使用var()
將該值替換為具有所需alpha值的rgba()
函數(shù),它將正常工作:
:root { /* #f0f0f0轉(zhuǎn)換為十進制RGB */ --color: 240, 240, 240; } body { color: #000; background-color: #000; } #element { background-color: rgba(var(--color), 0.8); }
<p id="element">如果您能看到這個,說明您的瀏覽器支持自定義屬性。</p>