CSS 变量和不透明度

Question

一个简短的问题，答案可能是 "NO"，但我是 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>

CSS 变量和不透明度

CSS variables and opacity

css

css-variables