我正在尝试使用 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>
最佳答案
您可以尝试如下:
: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>
关于html - 更新 css 自定义属性中的 alpha 值不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63043392/