如何通過JavaScript通過CSS設置確切的RGBa值？

在我嘗試過的大多數瀏覽器中，一旦瀏覽器解析CSS，RGBa值似乎會改變。如何通過JavaScript通過CSS設置確切的RGBa值？

例如，下面的CSS：當經由jQuery.css（ '背景顏色'）或天然CSSStyleDeclaration.getPropertyValue（ '背景顏色'）訪問

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

給出下面的CSS值：

rgba(255, 0, 0, 0.498039)

下面是更多的例子小提琴：http://jsfiddle.net/hgFEj/3/

Chrome和Safari給出不同的結果。 Firefox似乎是報告輸入的確切值的唯一瀏覽器。這是一個錯誤還是設計？

來源

2012-12-06 Vlad Magdalin

我瘋狂猜測它與浮點和計算機如何處理數字有關。 – adeneo

聲音作爲開發Web應用程序的任意世界的例證... :) – jtheman

這些值似乎不夠充分（例如0.01 - > 0.00784314），浮點精度似乎不是主要的罪魁禍首。我想知道是否有任何色彩配置文件調整正在進行。 –

Mark Hubbart的評論是正確的。

32位顏色分解成四個8位的部件，每一個範圍內0-255：紅色，綠色，藍色，和阿爾法。我們將alpha或透明度表示爲分數或百分比，因爲它可以幫助我們小數腦人士更快地瞭解它的透明度。它是作爲不透明（當然，不透明度），因爲100％的透明是0，而不是1

現在，給定255實際上更好的想法是爲阿爾法值的分母，也沒有辦法來表達0.5究竟。您看到的值0.498039來自最接近的分數127/255（四捨五入至小數點後6位）。 Safari返回0.496094，這是127/256四捨五入到小數點後6位，對我來說似乎是一個錯誤，因爲這意味着257個值。我也懷疑Firefox能夠準確報告0.5，除非它舍入到小數點後兩位。

您可以在不同的瀏覽器中解決此問題，方法是創建一個jQuery插件，在第一次執行時檢查是否返回50％alpha值，然後相應地調整所有計算。

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

然後，在手這個值，這樣做就可以了switch針對的是不同的瀏覽器返回，並適當地轉換成你期待最接近正確的值。

來源

2012-12-07 00:16:45 ErikE

https://crbug.com/453414 - 已經有Chrome（Blink）的修復程序，但他們認爲它不夠緊迫，無法發佈。請將該問題列爲明星，以獲得所需的關注。 – Noyo

如何通過JavaScript通過CSS設置確切的RGBa值？

回答

相關問題