1

我知道这可能还早，但我现在很困惑..我在 CSS 中设置了一个 rgba 的颜色

#body{ color: rgba( 100,100,100,0.3 ) }

当我要求 Javascript 给我这个元素的计算样式时，我得到了这个：

window.getComputedStyle(document.body)['color']
//rgba(100, 100, 100, 0.298039)

我期待的地方rgba(100,100,100,0.3)。

我的问题：为什么？

这怎么可能，我该如何解决这个问题？

4

2 回答 2

8

规范的所有字段rgba()似乎都在内部转换为 8 位字节。0.3变成round(0.3 * 255) = 76. 当它转换回 rgba 格式时，它会计算76/255 = 0.298039. 因为它不存储为十进制或浮点数，所以在此过程中会丢失精度——它无法知道原始设置是什么。

显示的实际外观没有区别，因为内部 8 位 alpha 是渲染时实际使用的。

于 2013-05-07T07:39:31.807 回答
3

大多数语言（包括 javascript）中的浮点数并不准确。鉴于浮点数的存储方式，许多数字（例如 0.3）无法精确表示。如果你想比较两个浮点数，典型的做法是在比较之前将它们四舍五入到小数点后，任何差异都会在四舍五入中消失。

此外，由于不透明度的小值（可能超过小数点后两位）之间没有明显的差异，浏览器可能使用更少的位来存储不透明度，从而导致比正常的 javascript 浮点值更差的精度。

如果您有理由存储精确值并保留该精确值，则将数字转换为字符串并将字符串存储在对象的自定义属性中。该属性将完全保留字符串值。如果您将该字符串转换回浮点数，您仍然必须忍受浮点精度的限制，但它应该比您看到的 opacity 值更准确。

由于 0.3 和 0.298039 的不透明度之间没有明显差异，您能描述一下问题的真正原因吗？

于 2013-05-07T07:31:34.363 回答