我知道这可能很早,但我现在很困惑.. 我在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)
。
我的问题:为什么?
这怎么可能,我该如何解决这个问题?
答案 0 :(得分:8)
rgba()
规范的所有字段似乎都在内部转换为8位字节。 0.3
变为round(0.3 * 255) = 76
。当它转换回rgba格式时,它会计算76/255 = 0.298039
。因为它没有存储为十进制或浮点数,所以在此过程中会丢失精度 - 它无法知道原始设置是什么。
显示器的实际外观没有区别,因为内部8位alpha是渲染时实际使用的。
答案 1 :(得分:3)
包括javascript在内的大多数语言的浮点都不准确。考虑到存储浮点数的方式,许多数字(如0.3)无法精确表示。如果你想比较两个浮点数,那么它的典型方法就是在比较之前将它们舍入到几个小数位,并且在舍入中任何差异都会消失。
此外,由于不透明度的小值(超过两个小数位)之间没有明显差异,浏览器可能使用更少的位来存储不透明度,因此导致比普通javascript浮点值更低的精度
如果您有理由存储精确值并保留该精确值,则将该数字转换为字符串并将该字符串存储在该对象的自定义属性中。该属性将完全保留字符串值。如果将该字符串转换回浮点数,您仍然需要考虑浮点精度的限制,但它应该比您在不透明度值中看到的更准确。
由于不透明度在0.3和0.298039之间没有明显差异,你能描述一下这个问题究竟是什么吗?