html - 更新 css 自定义属性中的 alpha 值不起作用

Question

这个问题在这里已经有了答案:





CSS scoped custom property ignored when used to calculate variable in outer scope

(1 个回答)


去年关闭。




我正在尝试使用 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>