首页  >  问答  >  正文

如何在CSS颜色变量中应用透明度?

<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>
P粉348088995P粉348088995449 天前429

全部回复(1)我来回复

  • P粉458725040

    P粉4587250402023-08-21 13:13:49

    您不能对现有的颜色值应用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>

    回复
    0
  • 取消回复