通过 element.style.background 设置时，浏览器会自动将 hex 或 hsl 颜色评估为 rgb？

Question

我不确定我是否遗漏了一些明显的东西，但有人可以向我解释一下吗？以下代码段来自我在 Chrome DevTools Console 上所做的。Firefox 的结果也是如此。

> let container = document.createElement("div")
> undefined
> container.style.background = "#bbb"
> "#bbb"
> container
> <div style=?"background:? rgb(187, 187, 187)?;?">?</div>?
> container.style.background = "hsl(120, 50%, 50%)"
> "hsl(120, 50%, 50%)"
> container
> <div style=?"background:? rgb(63, 191, 63)?;?">?</div>?

这是为了更好的可读性的图像。

这是标准行为吗？如果是这样，我如何将真正的 HEX 或 HSL 值放入内联样式？

Answer 1

根据规范：

如果该值是半透明的，则计算出的值将是rgba()相应的值。如果不是，则将是rgb()相应的。

这意味着无论您的输入是什么，计算值始终会产生rgb或rgba。

所以，回答你的问题：是的，这是标准行为，不，你不能使用十六进制或hsl，因为它将被计算回rgba。