时间戳

首页 > 解决方案 > 更新 css 自定义属性中的 alpha 值不起作用

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

问题描述

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

标签： htmlcsscss-variables

解决方案

您可以尝试如下：

: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>

推荐阅读