Wie wende ich Deckkraft auf CSS-Farbvariablen an?
P粉495955986
2023-08-24 00:12:47
<p>Ich entwerfe eine App mit Electron, damit ich auf CSS-Variablen zugreifen kann. Ich habe in vars.css eine Farbvariable definiert: </p>
<pre class="brush:css;toolbar:false;">:root {
--color: #f0f0f0;
}
</pre>
<p>Ich möchte diese Farbe in <code>main.css</code> verwenden, aber mit etwas Deckkraft: </p>
<pre class="brush:css;toolbar:false;">#element {
Hintergrund: (irgendwie var(--color) mit einer gewissen Deckkraft verwenden);
}
</pre>
<p>Wie mache ich das? Ich verwende keinen Präprozessor, nur CSS. Ich würde eine reine CSS-Antwort bevorzugen, aber ich akzeptiere JavaScript/jQuery. </p>
<p>Ich kann <code>Deckkraft</code> nicht verwenden, da das von mir verwendete Hintergrundbild nicht transparent sein sollte. </p>
您不能采用现有颜色值并对其应用 Alpha 通道。也就是说,您不能采用现有的十六进制值(例如
#f0f0f0
),为其提供 alpha 分量并将结果值与另一个属性一起使用。但是,自定义属性允许您将十六进制值转换为 RGB 三元组以与
rgba()
一起使用,将该值存储在自定义属性中(包括逗号!),使用将var()
转换为具有所需 alpha 值的rgba()
函数,它就会正常工作: