您不能對現(xiàn)有的顏色值套用alpha通道。也就是說,您無法對現(xiàn)有的十六進位值(例如#f0f0f0
)新增alpha分量,並將結果值與另一個屬性一起使用。
然而,自訂屬性允許您將十六進位值轉(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>