2016-03-01 7 views
6

Se imposto il valore alfa tramite rgba (r, g, b, a) in javascript su qualsiasi valore diverso da 1, il valore effettivo impostato dal browser è leggermente diverso. Ma il valore impostato in CSS è una corrispondenza esatta.(Chromium) valore di colore alfa (in rgba) in CSS e javascript

Vedere esempio di codice in 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. uso del browser Chromium
  2. premere F12 per attivare l'ispettore
  3. Ispezionare "Rosso".
  4. "Red" ha background-color impostato RGBA (255,0,0,0.3), ma nella ispettore suo valore è RGBA (255, 0, 0, 0,298,039 mila)
  5. "Green" ha impostato background-color a rgba (0,255,0,0.3), e il valore in Inspector corrisponde a quello.

Perché se il colore CSS è impostato tramite Javascript, il numero cambia?

+0

sembra che il valore di cromato sia sommato al valore alfa una costante di +/- 0,001961 quando è definito con un singolo decimale, anche con più decimali il valore cambia di nuovo, sembra un bug – fcalderan

risposta

2

In primo luogo, la mia osservazione originale non è corretta. Se si fa clic sulla scheda "Calcolata" per ispezionare lo sfondo-clor, questa differenza viene osservata per entrambe le regole CSS all'interno del tag "stile" e in linea all'interno degli elementi. I

In chromium source code questa implementazione spiega la differenza 0,001,961 mila nel valore 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)); 

qui alfa è 0,3, allora diventa alphaComponent 0,298,039 mila. (Se imposto l'alpha su qualsiasi punto mobile in [0.0, 1.0] il numero mostrato da webInspector corrisponde al valore di alphaComponent acquisito dalla formula precedente.

Problemi correlati