CSS 变量和不透明度

Question

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

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

--color: 12 12 12

以后总是与rgb 或rgba 一起使用？

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

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

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

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

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>