10

在我尝试过的大多数浏览器中，rgba()一旦浏览器解析了 CSS，值似乎就会改变。

例如，以下 CSS：

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

通过jQuery.css('background-color')或 native访问时给出以下 CSS 值CSSStyleDeclaration.getPropertyValue('background-color')：

rgba(255, 0, 0, 0.498039)

这是一个带有更多示例的小提琴。

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

4

1 回答 1

10

Mark Hubbart 的评论是正确的。

32 位颜色分为四个 8 位分量，每个分量都在 0-255 范围内：red、green、blue和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对不同浏览器返回的值执行一个操作，并正确转换为您期望的最接近的正确值。

于 2012-12-07T00:16:45.067 回答