10

私が試したほとんどrgba()のブラウザーでは、ブラウザーがCSSを解析すると、値が変更されるようです。

たとえば、次のCSS：

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

jQuery.css('background-color')またはネイティブ経由でアクセスすると、次のCSS値が返されますCSSStyleDeclaration.getPropertyValue('background-color')。

rgba(255, 0, 0, 0.498039)

これは、より多くの例を含むフィドルです。

ChromeとSafariでは異なる結果が得られます。Firefoxは、入力されたとおりの正確な値を報告する唯一のブラウザのようです。これはバグですか、それとも仕様によるものですか？

4

1 に答える 1

10

マークハバートのコメントは正しいです。

32ビットカラーは、それぞれ0〜255の範囲内にある4つの8ビットコンポーネント（赤、緑、青、およびアルファ）に分類されます。アルファ、つまり透明度は、小数の頭脳を持つ人々がそれがどれほど透明であるかをすばやく理解するのに役立つため、分数またはパーセンテージで表します。100％透明は1ではなく0であるため、実際には不透明度（まあ、不透明度）として考える方が適切です。

ここで、255がアルファ値の分母であるとすると、0.5を正確に表現する方法はありません。表示されている値0.498039は、最も近い端数127/255（小数点以下第6位に四捨五入）から取得されます。Safariは0.496094を返します。これは小数点以下6桁に丸められた127/256です。これは257の値を意味するため、私にはバグのように見えます。また、Firefoxが小数点以下2桁に丸められない限り、0.5を正確に報告できるかどうかも疑問です。

さまざまなブラウザでこの問題を回避するには、最初の実行時に50％のアルファで返される値を確認し、それに応じてすべての計算を調整するjQueryプラグインを作成します。

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

次に、この値を手元にswitch置いて、さまざまなブラウザが返す値に対してそれを実行し、期待している最も近い正しい値に適切に変換します。

于 2012-12-07T00:16:45.067 に答える