Heim > Fragen und Antworten > Hauptteil
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粉0685109912023-10-14 13:50:26
您不能采用现有颜色值并对其应用 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.