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

Posted 2023-05-09

【中文标题】如何通过 Javascript 通过 CSS 获取确切的 RGBa 值？

【英文标题】：How to get the exact RGBa value set through CSS via Javascript?

【发布时间】：2012-11-25 02:57:51

【问题描述】：

在我尝试过的大多数浏览器中，一旦浏览器解析 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)

这里是a fiddle，还有更多示例。

Chrome 和 Safari 给出不同的结果。 Firefox 似乎是唯一报告输入的确切值的浏览器。这是一个错误还是设计使然？

【问题讨论】：

我猜测它与浮点数以及计算机处理数字的一般方式有关。

听起来像是开发 Web 应用程序的任意世界的例证...... :)

这些值似乎足够不同（例如 0.01 -> 0.00784314），浮点精度似乎不是罪魁祸首。我想知道是否正在进行任何基于颜色配置文件的调整。

“rgba”中的“a”只是一个 8 位值。 127/255 是最接近 0.5 的值，它等于 0.498039

啊，谢谢@MarkHubbart，这很有道理！ Safari 返回 0.496094 (127/256)。其中一个肯定是错误。

【参考方案1】：

Mark Hubbart 的评论是正确的。

32 位颜色分解为四个 8 位分量，每个分量都在 0-255 范围内：red、green、blue , 和 alpha。我们将 alpha 或透明度表示为分数或百分比，因为它可以帮助我们这些小脑型的人更快地了解它的透明度。实际上，最好将其视为不透明（嗯，opacity），因为 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，并正确转换为您期望的最接近的正确值。

【讨论】：

crbug.com/453414 - Chrome (Blink) 已经有一个修复程序，但他们认为发布它还不够紧迫。请为该问题加注星标，以获得所需的关注。