Descrizione
Specifica il livello di trasparenza di un elemento di una pagina Web. Con trasparenza parziale o totale, l'immagine di sfondo o altri elementi sotto l'oggetto traslucido appaiono attraverso l'elemento.
Sintassi
opacità: valore
I valori
Il valore è un numero dall'intervallo. Un valore di 0 corrisponde alla piena trasparenza dell'elemento e 1, al contrario, alla sua opacità. Numeri frazionari come 0,6 impostano la traslucenza. È consentito scrivere numeri senza zero iniziale, come l'opacità: .6 .
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Il risultato di questo esempio è mostrato in Fig. uno.
Riso. 1. Il risultato dell'utilizzo dell'opacità
Browser
Firefox precedente alla versione 3.5 supporta la proprietà non standard -moz-opacity .
Internet Explorer prima della versione 9.0 utilizza i filtri per modificare la trasparenza, per questo browser dovresti scrivere filter : alpha(opacity=50) , dove il parametro opacity può assumere un valore da 0 a 100.
La proprietà CSS opacity è responsabile della trasparenza degli elementi (immagini, testo, blocchi) in html.
Sintassi CSS
opacità: valore;
Dove il valore può assumere valori reali nell'intervallo da 0,0 a 1,0. Un valore di 1,0 significa nessuna trasparenza (predefinito).
Esempi: come la trasparenza in html
Esempio 1. immagine trasparente in html
La prima immagine viene renderizzata senza trasparenza, la seconda con trasparenza 0,5.
Пример №2. Эффекты с прозрачностью в html
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в html
Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
object.style.opacity ="VALUE "
Для создания эффекта прозрачности в CSS используется свойство opacity .
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Provare "Passa il mouse sulla trasparenza
La pseudo-classe :hover ti consente di cambiare l'aspetto degli elementi quando ci passi sopra con il mouse. Utilizzeremo questa funzione per far perdere trasparenza all'immagine al passaggio del mouse:
Provare "Trasparenza dello sfondo
Ci sono due modi possibili per rendere trasparente un elemento: la proprietà di opacità sopra descritta e specificando un colore di sfondo RGBA.
Potresti già avere familiarità con il modello di rappresentazione del colore RGB. RGB (rosso, verde, blu - rosso, verde, blu) - un sistema di colori che determina la tonalità mescolando rosso, verde e blu. Ad esempio, per impostare il colore del testo su giallo, puoi utilizzare una delle seguenti dichiarazioni:
Colore: RGB(255,255,0); colore: RGB(100%,100%,0);
I colori specificati con RGB differiranno dai valori esadecimali che abbiamo usato prima in quanto consentono l'uso di un canale alfa per la trasparenza. Ciò significa che ciò che è sotto verrà mostrato attraverso lo sfondo di un elemento con trasparenza alfa.
La dichiarazione del colore RGBA è simile nella sintassi alle regole RGB standard. Tuttavia, tra le altre cose, dobbiamo dichiarare il valore come RGBA (anziché RGB) e impostare un valore di trasparenza decimale aggiuntivo dopo il valore del colore compreso tra 0.0 (completamente trasparente) e 1 (completamente opaco).
Colore: RGB(255,255,0,0,5); colore: rgba (100%, 100%, 0,0,5);
La differenza tra la proprietà di opacità e RGBA è che la proprietà di opacità applica la trasparenza all'intero elemento, ovvero l'intero contenuto dell'elemento diventa trasparente. E RGBA ti consente di impostare la trasparenza per le singole parti di un elemento (ad esempio, solo testo o sfondo):
Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70); /*per IE8 e precedenti*/ text-align: center; ) .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid nero; font-weight: grassetto; text-align: center; ) Prova »
Nota: i valori RGBA non sono supportati in IE8 e precedenti. Per dichiarare un colore di fallback per i browser meno recenti che non supportano i valori di colore con i canali alfa, specificarlo prima del valore RGBA: background: rgb(255,255,0); sfondo: rgba(255,255,0,0,5);
La trasparenza nei CSS è una tecnica piuttosto alla moda ultimamente, che causa difficoltà nell'implementazione cross-browser. Finora non esiste un metodo universale che consenta di implementare la trasparenza per tutti i browser. Tuttavia, la situazione è notevolmente migliorata negli ultimi anni.
Questo articolo illustra in dettaglio gli approcci esistenti e fornisce esempi di codice e spiegazioni per aiutarti a ottenere lo stesso risultato in tutti i browser con il minimo sforzo.
Un altro punto degno di nota è che, sebbene la trasparenza sia in circolazione da alcuni anni, non è mai stata parte dello standard CSS. Questa è una proprietà non standard che dovrebbe diventare parte della specifica CSS3.
vecchio approccio
Nelle versioni precedenti di Firefox e Safari, è necessario applicare la proprietà in questo modo:
#myElement ( -khtml-opacità: .5; -moz-opacità: 0.5; )
La proprietà -khtml-opacity è stata utilizzata nelle versioni precedenti dei browser webkit. Questa proprietà è obsoleta e non è più necessaria a meno che tu non sia certo che una parte significativa del traffico del tuo sito provenga da visitatori che utilizzano Safari 1.x, il che è ovviamente improbabile.
La riga successiva usa la proprietà -moz-opacity, che funzionava sulle primissime versioni del motore Mozilla. Firefox ha smesso di supportarlo nella versione 0.9.
Trasparenza CSS in Firefox, Safari, Chrome e Opera
Per la maggior parte dei browser moderni è sufficiente utilizzare la seguente proprietà:
#myElement ( opacità: .7; )
Nell'esempio sopra, l'elemento è impostato su 70% di opacità (30% di trasparenza). Cioè, se impostiamo il valore su uno, l'elemento sarà opaco e, di conseguenza, l'impostazione di questo valore su zero lo renderà invisibile.
La proprietà opacità gestisce 2 cifre decimali. Cioè, il valore ".01" sarà diverso dal valore ".02", sebbene questo sia appena percettibile.
Trasparenza CSS per Internet Explorer
Come al solito, Internet Explorer non è compatibile con altri browser. Inoltre, ora abbiamo tre versioni di questo browser ampiamente utilizzate, l'impostazione della trasparenza in ciascuna delle quali è diversa e talvolta richiede uno sforzo aggiuntivo per ottenere un risultato positivo.
#myElement (filtro: alfa(opacità=40); )
Questo esempio usa la proprietà filter, che funziona nelle versioni 6-8, ma c'è una limitazione per le versioni 6 e 7: la proprietà hasLayout dell'elemento deve essere impostata su true . Questa proprietà è presente solo in IE e puoi leggere di più a riguardo, ad esempio, su Habré.
Un altro modo per impostare la trasparenza utilizzando CSS in IE8 è utilizzare il seguente approccio (notare i commenti):
#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* funziona in IE6, IE7 e IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * Solo IE8 */ )
La prima riga funzionerà in tutte le versioni attualmente utilizzate, la seconda solo in IE8. Si noti che la seconda riga utilizza il prefisso -ms- e il valore è racchiuso tra virgolette.
Impostazione e modifica della trasparenza CSS con JavaScript o jQuery
È possibile utilizzare il codice seguente per impostare la trasparenza:
Document.getElementById("myElement").style.opacity = ".4"; // per la maggior parte dei browser document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // per IE
Naturalmente, in questo caso è molto più semplice usare jQuery, e funzionerà anche in tutti i browser:
$("#myElement").css(( opacità: .4 )); // funziona con tutti i browser
Puoi animare questa proprietà:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animazione completata; questo codice funziona in tutti i browser. ));
funzione RGBA
CSS3 prevede di supportare il canale alfa con la funzione rgba. Questa funzione funziona in Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Si usa così:
#rgba ( sfondo: rgba(98, 135, 167, .4); )
In questo caso, l'ultimo parametro indica il livello di opacità.
funzione HSLA
Come la precedente funzione, anche CSS3 consente di impostare un colore traslucido utilizzando la funzione HSLA, i cui parametri significano Tonalità (Tonalità), Saturazione (Saturazione), Luminosità (Luminosità) e Canale alfa (Alfa).
#hsla ( sfondo: hsla(207, 38%, 47%, .4); )
Un punto importante quando si utilizzano le funzioni rgba e hsla è che l'impostazione della trasparenza non si applica agli elementi figlio, mentre l'uso della proprietà opacity viene ereditato.
La proprietà CSS opacity è responsabile della trasparenza degli elementi (immagini, testo, blocchi) in html.
Sintassi CSS
Dove il valore può assumere valori reali nell'intervallo da 0,0 a 1,0. Un valore di 1,0 significa nessuna trasparenza (predefinito).
Esempio 1. immagine trasparente in html
La prima immagine viene renderizzata senza trasparenza, la seconda con trasparenza 0,5.
Traslucenza degli elementi
Rendere l'immagine traslucida al passaggio del mouse!
DemoScarica sorgentiGrazie per l'attenzione!
Articolo successivo
Come creare un div scorrevole?
