如何在CSS颜色变量中应用透明度？
P粉348088995
2023-08-20 18:51:07
<p>我正在electron中设计一个应用程序，所以我可以访问CSS变量。我在<code>vars.css</code>中定义了一个颜色变量：</p>
<pre class="brush:css;toolbar:false;">:root {
--color: #f0f0f0;
}
</pre>
<p>我想在<code>main.css</code>中使用这个颜色，但要应用一些透明度：</p>
<pre class="brush:css;toolbar:false;">#element {
background: (以某种方式使用var(--color)并设置一些透明度);
}
</pre>
<p>我该如何做到这一点？我没有使用任何预处理器，只使用CSS。我更喜欢一个纯CSS的答案，但我也可以接受JavaScript/jQuery的解决方案。</p>
<p>我不能使用<code>opacity</code>，因为我正在使用一个不应该是透明的背景图片。</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您不能对现有的颜色值应用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); }