如何在CSS顏色變數中應用透明度？

Question

我正在electron中設計一個應用程序，所以我可以訪問CSS變數。我在vars.css中定義了一個顏色變數：

:root {
  --color: #f0f0f0;
}

我想在main.css中使用這個顏色，但要套用一些透明度：

#element {
  background: (以某種方式使用var(--color)並設定一些透明度);
}

我該如何做到這一點？我沒有使用任何預處理器，只使用CSS。我比較喜歡一個純CSS的答案，但我也可以接受JavaScript/jQuery的解決方案。

我不能使用opacity，因為我正在使用一個不應該是透明的背景圖片。

Answer 1

您不能對現有的顏色值套用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>