CSS中的颜色算法

我们可以在CSS中将计算结果设置为背景色吗

background-color: var(--backColor) + #101010;

---

这里——backColor是一个CSS变量。

如果不使用预编译器或JavaScript/jQuery解决方案，您将受到真正的限制

就我所研究的而言，我认为这在十六进制值中是不可能的，除非你找到一种方法将十六进制值拼接成3个不同的值，然后将它们转换成十进制相对值

但是，此解决方案不适用于十六进制，但对于那些寻找rgb/rgba解决方案的人，您可以将值拆分为各自的变量，然后根据决定使用

calc（）

进行加/减/乘

如果阅读，您将看到浏览器在值超过255或低于0时为您处理最小值/最大值，这样就可以轻松插入错误值，而不必担心逻辑问题

当色域已知时，设备色域之外的值应剪裁或映射到色域中：红色、绿色和蓝色值必须更改为在设备支持的范围内

现在，我不能说这是跨浏览器兼容的，但在最新版本的Chrome中测试，Edge会产生高质量的结果。然而，Chrome似乎没有剪切的上限/下限，我做了有限的测试，但是Edge确实有一个上限，即向数字中添加

214748

。因此，对于所有与兼容性有关的问题，请确保测试符合您的需求

这里是一个例子，请注意，您不必使用整数，您可以使用百分比或任何限定的数字组合，如组合hsl

：根目录{
--r:0；
--g:0；
--b:0；
}
#div{
/*值应为aqua:0、255、255*/
背景：rgb（calc（var（--r）*255）、calc（var（--g）+1*255）、calc（var（--b）+255））；
}
#第二组{
/*值应为红色：255,0,0*/
背景：rgb（calc（var（-r）+500）、calc（var（-g）*500）、calc（var（-b）-500））；
}

Div
具有最小/最大剪裁的Div 2

是和否。我不确定十六进制方案，但您可以将rgb值拆分为3个单独的变量，并使用该变量进行计算。当然，很难进行彻底的逻辑分析，但这是一种选择……我看不到。。。但也许正如@soulshined所说，也许rgb可以作为选择参见：谢谢@soulshined。它起作用了。