Wie wende ich die Deckkraft auf eine CSS-Farbvariable an?
P粉496886646
P粉496886646 2023-10-13 14:43:49
0
1
723

Ich entwerfe eine App mit 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 mit etwas Deckkraft:

#element {
  background: (somehow use var(--color) at some opacity);
}

Wie mache ich das? Ich verwende keinen Präprozessor, nur CSS. Ich würde eine reine CSS-Antwort bevorzugen, aber ich akzeptiere JavaScript/jQuery.

Ich kann opacity nicht verwenden, da das von mir verwendete Hintergrundbild nicht transparent sein sollte.

P粉496886646
P粉496886646

Antworte allen(1)
P粉068510991

您不能采用现有颜色值并对其应用 Alpha 通道。也就是说,您不能采用现有的十六进制值(例如 #f0f0f0),为其提供 alpha 分量并将结果值与另一个属性一起使用。

但是,自定义属性允许您将十六进制值转换为 RGB 三元组以与 rgba() 一起使用,将该值存储在自定义属性中(包括逗号!),使用将 var() 转换为具有所需 alpha 值的 rgba() 函数,它就会正常工作:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

If you can see this, your browser supports custom properties.

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage