2016-03-01 11 views
6

Jeśli ustawię wartość alfa za pomocą rgba (r, g, b, a) w javascript na cokolwiek innego niż 1, rzeczywista wartość ustawiona przez przeglądarkę jest nieznaczna różne. Ale wartość ustawiona w CSS jest dokładnie zgodna.(Chrom) Wartość koloru alfa (w rgba) w CSS i javascript

kod widoczny na próbkę w code-pen-site

<head>  
     <script type="text/javascript" language="javascript"> 
     window.onload=function() { 
     document.getElementById("p1").style["background-color"]="rgba(255,0,0,0.3)"; 
     } 
     </script> 
    </head> 

    <body> 
     <p>RGB colors with opacity:</p> 
     <p id="p1">Red</p> 
     <p id="p2">Green</p> 
    </body> 
  1. użycie chromu przeglądarka
  2. Naciśnij klawisz F12, aby aktywować Inspektor
  3. Sprawdzić, "czerwony".
  4. "Czerwony" ma ustawiony kolor tła na rgba (255,0,0,0.3), ale w Inspektorze ma wartość rgba (255, 0, 0, 0.298039)
  5. "Zielony" ma zestaw tło-kolor do rgba (0,255,0,0,3), a wartość w Inspektorze pasuje do tego.

Dlaczego jeśli kolor CSS jest ustawiony przez Javascript, to liczba się zmienia?

+0

wydaje się, że chrome sumuje do wartości alfa stałą "+/- 0,001961" gdy jest zdefiniowany za pomocą jednego miejsca po przecinku, również z większą liczbą miejsc po przecinku, wartość ponownie się zmienia, co wydaje się błędem – fcalderan

Odpowiedz

2

Po pierwsze, moja pierwotna obserwacja jest niepoprawna. Jeśli klikniesz na kartę "Obliczone", aby sprawdzić tło-clora, różnica ta jest obserwowana dla obu reguł CSS wewnątrz znacznika "styl" i wewnątrz elementów. I

W chromium source code Implementacja ta wyjaśnia różnicę w wartości alfa

// Convert the floating pointer number of alpha to an integer in the range [0, 256), 
// with an equal distribution across all 256 values. 
int alphaComponent = 
    static_cast<int>(
     clampTo<double>(alpha, 0.0, 1.0) * nextafter(256.0, 0.0)); 

Tutaj 0.001961 jeśli alfa wynosi 0,3, a następnie alphaComponent staje 0.298039. (Jeśli ustawię alfa na dowolny zmiennoprzecinkowy w [0,0, 1,0], liczba wyświetlana przez webInspector odpowiada wartości alphaComponent uzyskanej z powyższej formuły:

Powiązane problemy