css - CSS 变量和不透明度

Question

一个简单的问题，答案可能是“否”，但我是 CSS 变量的新手，所以我不确定。

如果我想定义颜色并且以后能够为其添加 alpha 通道，那么我唯一的 CSS 变量选择是将其定义为 RGB 通道的 3 个数字：

--color: 12 12 12

后来总是与rgbor一起使用它rgba？

color: rgb(var(--color));

background: rgba(var(--color), .5);

真的没有办法定义一个实际的颜色，然后只使用 CSS 变量添加 alpha 吗？可能我最好的选择是定义 2 个变量：

--color-rgb和--color: rgb(var(--color-rgb))

标签： csscss-variables

Answer 1

你差不多好了，你只需要注意语法：

:root {
  --c:255,0 ,0;
  --o:0.5;
}
html {
  background:rgba(var(--c),var(--o));
}
body {
   background:rgb(var(--c));
   height:100px;
}
.box {
 --c:12,12,12;
 --o:0.7;
 background:rgba(var(--c),var(--o));
 color:#fff;
}

<div class="box">
  some content
</div>

您也可以单独定义每个通道：

:root {
  --r:255;
  --g:0;
  --b:0;
  --c:var(--r),var(--g) ,var(--b);
  --o:0.5;
}
html {
  background:rgba(var(--c),var(--o));
}
body {
   background:rgb(var(--c));
   height:100px;
}
.box {
 --c:12,12,12;
 --o:0.7;
 background:rgba(var(--c),var(--o));
 color:#fff;
}

<div class="box">
  some content
</div>