Perché jQuery .css ('background-color') restituisce rgba (0,0,0,0) per 'transparent'?

Question

Ho una scatola qui - http://jsfiddle.net/U68p3/2/ - con uno sfondo trasparente. Quando ho letto lo sfondo con css di jQuery ('background-color') restituisce

   rgba(0, 0, 0, 0) 

che non è molto utile se il mio codice è alla ricerca di una corrispondenza con 'trasparente'.

Perché jQuery sta facendo questo ed esiste un modo per renderlo "trasparente"?

Grazie.

$(function() { 
    var bkgnd = $('#box').css('background-color'); 
    console.log('background-color is ' + bkgnd); 
}); 

Answer 1

E non è jQuery, il valore calcolato per il colore sono rappresentati in RGBA (rosso, blu, verde, Alpha - per opacità) e non come i nomi dei colori (come il rosso, blu, arancione, trasparente, ecc) o come valori esadecimali. In base allo specs la trasparenza è rappresentata come rgb(0, 0, 0).

se il valore è traslucido, il valore calcolato sarà quello rgba() corrispondente. Se non lo è, sarà quello corrispondente a rgb(). La parola chiave trasparente si associa a rgb (0,0,0).

Così, invece di ricerca di questo valore specifico è possibile aggiungere una regola CSS specifica solo per includere la trasparenza e aggiungere quella classe all'elemento e utilizzare .hasClass o .is di quella classe per verificare se l'elemento è trasparente.

Sembra che diversi browser lo rappresentino in diversi modi, IE, FF fornisce il valore come transparency quindi è comunque meglio non fare affidamento su questa rappresentazione del valore per nessuna logica.

Answer 2

Non è possibile ottenere il colore come nome direttamente da jQuery.

Puoi invece usare il plugin jQuery Color (https://github.com/jquery/jquery-color) per convertire il valore nel suo nome, o fare manualmente qualcosa di simile.

Un esempio di utilizzare il jsFiddle

$(function() { 
    var bkgnd = $('#box').css('background-color'); 
    console.log('background-color is ' + jQuery.Color(bkgnd).toString()); 
}); 

(http://jsfiddle.net/Ap6qD/1/)

Answer 3

Non è jQuery. jQuery restituisce ciò che il browser gli assegna per il valore calcolato (ad esempio, da getComputedStyle o currentStyle). Ciò che il browser dà potrebbe essere in qualsiasi forma di notazione che il browser voglia utilizzare. In questo caso, il browser su cui stai eseguendo il test utilizza rgba (rosso, verde, blu, "alpha"   — ad esempio, opacità, 0 = trasparente), che è una notazione abbastanza buona. Altri browser potrebbero usare solo rgb o anche stringhe di colore esadecimale, il che sarebbe sfortunato poiché nessuno di questi può rappresentare correttamente transparent.