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>