为什么我不能在背景 HEX 上应用不透明度：根 CSS 变量？

Question

我有 :root css 变量

--color: #ff0000;

。我使用十六进制代码，而不是 rgb/rgba。我正在尝试使这种颜色可变

opacity: .2;

。但我无法让它工作。

我尝试了这个和其他一些选项。如何在 HEX css 变量上设置不透明度？

tr {
    background: rgba(var(--theme-color), 0.2);
}

Answer 1

它确实是这样工作的：

:root {
    --color: 255,255,0;
  }
  body {
    background: rgba(var(--color), 0.5) !important;
  }

Answer 2

当你做

:root {
  --theme-color: #ff0000;
}
tr {
    background: rgba(var(--theme-color), 0.2);
}

浏览器只是按字面意思理解。你最终得到了

tr {
    background: rgba(#ff0000, 0.2);
}

这是

rgba

的无效语法。如果您打开浏览器控制台并检查样式，您会发现它是无效的。

您有几个选择：

获取等同于十六进制颜色的 rgb 并使用它。在你的情况下，
```
#ff0000
```
的 rgb 等价物是
```
255, 0, 0
```
，所以你可以做
```
rgba(255, 0, 0, 0.2)
```
.
以 8 个字符的十六进制形式设置不透明度。请参阅透明度的十六进制颜色代码。在你的情况下是
```
#ff000033
```
.
如果您使用像 Sass 这样的预处理器，您可以使用颜色函数以编程方式设置变量中不透明颜色的值。例如，Sass 有
```
transparentize
```
函数。其他预处理器有等效的，所以你可以谷歌。
使用实际的 CSS
```
opacity
```
属性。
```
tr {
  background: var(--theme-color);
  opacity: 0.2;
}
```
但是请注意，这与更改
```
background-color
```
中的 alpha 值并不完全相同。不透明度会影响整个元素及其子元素，因此您可能必须更改 HTML/CSS 的处理方式才能获得相同的视觉效果。