更新css自定义属性中的alpha值不起作用[重复]

Question

我正在尝试使用 CSS 自定义属性覆盖 HSLA 中的 alpha 值。 在下面的代码中，我想将 alpha 值更新为 0.1，因此最终输出应该是 hsla(0, 0%, 26%, 0.1)。当我检查元素时，它符合我的预期，但渲染的输出没有应用 alpha 值。有什么解决办法吗？

谢谢！

:root {
  --bg-color: hsla(0, 0%, 26%, var(--a, 1));
}

.dark {
  color: #efefef;
  background-color: var(--bg-color);
}

.light {
  --a: 0.1;
  color: #888;
  background-color: var(--bg-color);
}

<div class="dark">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>
<div style="margin-top: 3rem"></div>
<div class="light">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>

Answer 1

您可以尝试如下：

:root {
  --a: 1;
  --hsl: 0, 0%, 26%;
}

.dark {
  color: #fff;
  background-color: hsl(var(--hsl), var(--a));
}

.light {
  --a: 0.1;
  color: #fff;
  background-color: hsl(var(--hsl), var(--a));
}

<div class="dark">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>
<div style="margin-top: 3rem"></div>
<div class="light">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quia, at aliquid temporibus optio ipsa ullam eaque et fugiat? Aliquid fugit facere officiis nostrum. Consequatur maiores aspernatur ipsum ratione facilis!</div>

Answer 2

我猜这是范围问题。 --bg-color 已经在 :root 中定义，并且比在类中使用时具有更高的重要性。所以--bg-color 需要重新定义才能应用更改。

---

或者颠倒重要性顺序，例如以更高的特异性（如类）声明--a，意味着它在用于--bg-color的变量声明之前已经定义。

假设你是 css 处理器， 您首先查看:root，查看--bg-color 的定义并记住它。 现在，当您处理您知道的其余 css 规则时，您需要使用它。它不会返回并重新定义它已经处理过的变量。

div {
  --bg-color: hsla(0, 0%, 26%, var(--a, 1));
}

.dark {
  color: #efefef;
  background-color: var(--bg-color);
}

.light {
  --a: 0.1;
  color: #888;
  background-color: var(--bg-color);
}