2014-05-24 15 views
7

Quindi ho appena generato opacity for interactive fading.Qual è la massima precisione dell'opacità CSS3?

Penso, tuttavia, che non è una buona idea usare valori non arrotondati per l'opacità. Se la precisione massima è inferiore al massimo javascript in precisione, i browser sembrano arrotondare il valore, ma considerarlo cambiato.

Quindi la domanda è: qual è la massima precisione che ha senso per CSS3 opacity?

+5

Ho la sensazione che questo dipenda dall'implementazione. – BoltClock

+0

Non ho alcuna prova specifica, ma per far sì che IE suoni bene ho sempre pensato all'opacità in decimali tra 0 e 1, consentendo 11 possibilità, non è molto ma garantiscono un 'cambiamento' –

+0

Ho appena provato con [Math.random in Chrome] (http://jsfiddle.net/pXqdH/1/) e l'impostazione e l'ottenimento di 16 posizioni decimali non sembrano essere un problema, suppongo che la domanda sia più ciò che sarebbe pratico, e cosa puoi vedere realmente la differenza? – adeneo

risposta

5

Opacity consente praticamente qualsiasi numero di decimali che desideri, ma il problema è che l'HTML può cambiare la sua leggerezza in 256 modi diversi. Quindi, l'opacità più sensibile sarebbe in qualcosa di nero su qualcosa di bianco, che avrebbe una varietà visibile di 256 tonalità diverse. Questo perché il rapporto tra R, G e B deve sempre rimanere lo stesso per mantenere lo stesso colore.

Quindi, poiché il colore più sensibile ha 256 valori diversi, il più piccolo cambiamento che avrebbe un effetto sull'output visibile sarebbe 1/256 = 0.00390625. In teoria, dovrebbe essere la dimensione minima dello step per aumentare la tua opacità.

L'ho provato e, utilizzando un semplice selettore di colori, ho notato che in this example fiddle, il div bottom era l'unico a cambiare colore. I primi 2 div avevano il colore #000000 e il div inferiore aveva il colore #010101. Quindi, direi, sulla base di questo, che:

  1. I valori inseriti non sono arrotondati, o se lo sono, sono sempre arrotondati (floor function)
  2. La sensibilità massima per l'opacità è 3 decimali.

Va notato che questo è stato testato in Google Chrome e, come detto da BoltClock, questo potrebbe variare in base all'implementazione.

Problemi correlati