CSS 中的颜色算术

Question

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

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

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

Answer 1

如果不使用预编译器或 JavaScript/jQuery 解决方案，您的能力将会受到很大限制。

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

然而，这个解决方案不适用于十六进制，但对于那些寻找 rgb/rgba 解决方案的人来说，您可以将值拆分为各自的变量，然后根据calc()需要进行加/减/乘。

如果您阅读此处的规范，您将看到浏览器会在值超过 255 或低于 0 的情况下为您处理最小/最大，从而可以轻松插入错误值，而无需担心逻辑。

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

现在，我不能说这是跨浏览器兼容的，但在最新版本的 Chrome、Edge 中进行测试会产生高质量的结果。然而，根据我所做的有限测试，Chrome 似乎没有裁剪的上限/下限，但 Edge 确实有添加214748数字的上限。因此，对于与兼容性有关的所有内容，请确保根据您的需求进行测试。

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

:root {
  --r : 0;
  --g : 0;
  --b : 0;
}
#div {
  /* value should be aqua:  0, 255, 255 */
  background: rgb(calc(var(--r) * 255), calc(var(--g) + 1 * 255), calc(var(--b) + 255));
}
#div2 {
  /* value should be red: 255, 0, 0 */
  background: rgb(calc(var(--r) + 500), calc(var(--g) * 500), calc(var(--b) - 500));
}

<div id="div">
  Div
</div>
<div id="div2">
  Div 2 With Min/Max clipping
</div>