Wie wende ich Transparenz in CSS-Farbvariablen an?

Question

Ich entwerfe eine App in Electron, damit ich auf CSS-Variablen zugreifen kann. Ich habe in vars.css eine Farbvariable definiert:

:root {
  --color: #f0f0f0;
}

Ich möchte diese Farbe in main.css verwenden, aber etwas Transparenz anwenden:

#element {
  Hintergrund: (irgendwie var(--color) verwenden und etwas Transparenz einstellen);
}

Wie mache ich das? Ich verwende keinen Präprozessor, nur CSS. Ich würde eine reine CSS-Antwort bevorzugen, bin aber auch offen für JavaScript/jQuery-Lösungen.

Ich kann Deckkraft nicht verwenden, da ich ein Hintergrundbild verwende, das nicht transparent sein sollte.

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>