如何通过Javascript获取通过CSS设置的确切RGBa值？

Question

在我尝试的大多数浏览器中,一旦浏览器解析CSS,RGBa值似乎就会改变.

例如,以下CSS:

background-color: rgba(255, 0, 0, 0.5);

通过jQuery.css('background-color')或本机CSSStyleDeclaration.getPropertyValue('background-color')访问时,提供以下CSS值:

rgba(255, 0, 0, 0.498039)

这是一个更多例子的小提琴:http://jsfiddle.net/hgFEj/3/

Chrome和Safari会产生不同的结果.Firefox似乎是唯一报告输入的确切值的浏览器.这是一个bug还是设计？

Answer 1

Mark Hubbart的评论是正确的.

32位颜色分为四个8位组件,每个组件在0-255范围内:红色,绿色,蓝色和alpha.我们将alpha或透明度表示为一个分数或百分比,因为它可以帮助我们十进制大脑的人们更快地了解它是多么透明.它实际上更好地被认为是不透明度(嗯,不透明度),因为100%透明是0而不是1.

现在,给定255是alpha值的分母,没有办法完全表达0.5.您看到的值0.498039来自最近的分数127/255(四舍五入到小数点后6位).Safari返回0.496094,这是127/256舍入到6位小数,对我来说似乎是一个错误,因为这意味着257个值.我也怀疑Firefox可以准确地报告0.5,除非它只舍入到2位小数.

您可以通过创建一个jQuery插件在不同的浏览器中解决此问题,该插件在首次执行时会检查以50%alpha返回的值,并相应地调整所有计算.

parseFloat(
   $('#divWith50PercentAlphaBackgroundStyle')
      .css('background-color')
      .split(',')[3],
   10
)

然后,使用此值,switch对不同浏览器返回的值执行操作,并正确转换为您期望的最接近的正确值.