Crea uno sfondo trasparente in HTML e CSS (opacità ed effetti RGBA)

Effetto di traslucenza l'elemento è chiaramente visibile nell'immagine di sfondo ed è diventato molto diffuso in diversi sistemi operativi, perché sembra elegante e bello. La cosa principale non è avere un motivo monocromatico sotto i blocchi traslucidi, ma un'immagine, è in questo caso che la trasparenza diventa evidente.

Questo effetto si ottiene in vari modi, comprese le tecniche antiquate come l'utilizzo di un'immagine PNG come sfondo, la creazione di un'immagine a scacchi e la proprietà di opacità. Ma non appena diventa necessario creare uno sfondo traslucido in un blocco, questi metodi hanno spiacevoli svantaggi.

Considera la traslucenza del testo e dello sfondo: come utilizzarli correttamente nella progettazione di siti Web:

La caratteristica principale di questa proprietà è che il valore di trasparenza influisce su tutti i bambini all'interno, non solo sullo sfondo. Ciò significa che sia lo sfondo che il testo diventeranno traslucidi. È possibile aumentare il livello di trasparenza modificando il comando opacità da 0,1 a 1.

HTML 5 CSS 3 IE 9

Nel web design, la trasparenza parziale viene applicata e ottenuta anche attraverso il formato colore RGBA, che è impostato solo per lo sfondo di un elemento.

In genere, nei progetti, solo lo sfondo di un elemento dovrebbe essere traslucido e il testo dovrebbe essere opaco per mantenere la leggibilità. La proprietà di opacità è inappropriata qui perché anche il testo all'interno dell'elemento sarà parzialmente trasparente. È preferibile utilizzare il formato RGBA, di cui fa parte il canale alfa, ovvero il valore di trasparenza. Il valore è scritto rgba, quindi i valori dei componenti di colore rosso, blu e verde sono elencati tra parentesi separate da virgole. L'ultimo è la trasparenza, che è impostata da 0 a 1, dove 0 è la trasparenza completa e 1 è il colore opaco per la sintassi rgba.

Sfondo traslucido HTML 5 CSS 3 IE 9

L'opacità dello sfondo è impostata su 90%: sfondo semitrasparente e testo opaco.

La proprietà opacità CSS viene utilizzata per controllare l'opacità degli elementi della pagina. Per specifica, si applica a qualsiasi tipo di nodo ed è supportato in tutti i browser moderni. Con il suo aiuto, puoi creare un design interessante o implementare una comoda interazione interattiva con l'utente.

Valori possibili

La sintassi per la proprietà di opacità in css è simile a questa:

Selettore (opacità: 1;) selettore (opacità: 0;) selettore (opacità: 0.4;)

Come input vengono accettati valori numerici nell'intervallo da 0 a 1. Il parametro può essere una frazione di uno, mentre un punto viene utilizzato come separatore per le parti intere e frazionarie nei CSS.

Un elemento con trasparenza zero diventa invisibile, ma continua comunque a prendere posto nella pagina e conserva la capacità di interagire con l'utente.

Se il valore della proprietà è diverso da zero, la trasparenza reale verrà calcolata come percentuale di un limite superiore. Normalmente, opacità: 1 determina l'intera opacità dell'elemento.

Trasparenza dei nodi figlio

Tuttavia, se l'elemento ha un genitore la cui trasparenza è diversa da quella, il calcolo cambia. Un discendente non può essere "meno trasparente" di nessuno dei suoi antenati. Il valore di opacità del blocco padre diventa il limite superiore dell'opacità del blocco figlio.

Genitore (opacità: 0,7;) figlio (opacità: 1;)

In questa situazione, l'elemento figlio sarà trasparente al 30%, anche se l'opacità è impostata su uno.

Esempi di utilizzo

Esempio 1. Traslucenza. È necessario che lo sfondo principale del blocco sia visibile sotto l'elemento di destinazione.

Bersaglio (sfondo: nero; opacità: 0,5;)

Non solo lo sfondo del blocco di destinazione diventa traslucido, ma anche il testo.

Esempio 2. Controllo dinamico della trasparenza. Il valore della proprietà di opacità CSS del blocco di destinazione cambia quando ci passi sopra con il mouse.

Target (opacità: 0,2;) .target: hover (opacità: 1;)

Trasparenza dinamica

L'ultimo esempio dimostra che gli elementi trasparenti continuano a rispondere agli eventi della pagina come il passaggio del mouse. Ciò consente di utilizzare javascript per controllare la proprietà di opacità CSS, nonché utilizzare meccanismi di transizione e animazione per modificare senza problemi la modalità di visualizzazione.

Per accedere alla trasparenza dallo script, è necessario fare riferimento all'oggetto stile di un particolare elemento.

// ottiene l'opacità corrente var opacity = element.style.opacity; // imposta un nuovo valore element.style.opacity = 0.4;

La dissolvenza in uscita di un blocco può essere implementata utilizzando la proprietà CSS di transizione:

Elemento (opacità: 0,1; transizione: opacità 1000 ms;) elemento: hover (opacità: 0,8; transizione: opacità 2000 ms;)

Ora, il nodo dell'elemento cambierà l'opacità dal 10 all'80% al passaggio del mouse entro un secondo e quando il cursore si allontana, svanirà al suo valore originale entro due secondi.

La proprietà opacità CSS, unita al meccanismo di transizione, permette di creare bellissimi effetti.

Canale alfa invece di opacità

Le principali sottigliezze del meccanismo di opacità nei CSS:

• il suo effetto si estende non solo allo sfondo del blocco, ma anche al suo contenuto testuale, che è preferibile lasciarlo chiaro;
• gli elementi figlio non possono essere meno trasparenti degli elementi padre.

Se questi effetti rendono la vita difficile al progettista del layout, invece dell'opacità, dovresti semplicemente usare uno sfondo trasparente, specificando il suo valore in formato RGBA o HSLA.

La trasparenza nei CSS è stata una tecnica piuttosto alla moda ultimamente e sta causando difficoltà nell'implementazione cross-browser. Fino ad ora, non esisteva un metodo valido per tutti per implementare la trasparenza in tutti i browser. Di recente, però, la situazione è nettamente migliorata.

Questo articolo esamina 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 esista da diversi anni, non ha mai fatto parte dello standard CSS. Questa è una proprietà non standard e dovrebbe far parte delle specifiche CSS3.

Vecchio approccio

Nelle versioni precedenti di Firefox e Safari, è necessario applicare la proprietà in questo modo:

#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)

La proprietà -khtml-opacity è stata utilizzata nelle versioni precedenti dei browser webkit. Questa proprietà è deprecata e non è più necessaria a meno che tu non sia sicuro 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 prime versioni del motore Mozilla. Firefox ha terminato il supporto per esso nella versione 0.9.

Trasparenza CSS in Firefox, Safari, Chrome e Opera

Per la maggior parte dei browser moderni è sufficiente la seguente proprietà:

#myElement (opacità: .7;)

Nell'esempio sopra, l'elemento è impostato su un valore di opacità del 70% (30% di opacità). 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 non sia molto evidente.

Trasparenza CSS per Internet Explorer

Come al solito, Internet Explorer non è in rapporti amichevoli con altri browser. Inoltre, ora abbiamo tre versioni di questo browser in uso abbastanza diffuso, l'impostazione della trasparenza in ciascuna delle quali è diversa e talvolta richiede sforzi aggiuntivi 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: l'elemento deve avere la sua proprietà hasLayout 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 in uso, la seconda solo in IE8. Nota che la seconda riga usa il prefisso -ms- e il valore è citato.

Impostazione e modifica della trasparenza CSS utilizzando JavaScript o jQuery

È possibile utilizzare il seguente codice 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

Ovviamente in questo caso è molto più semplice usare jQuery, inoltre funzionerà in tutti i browser:

$ ("# mioElemento"). css ((opacità: .4)); // funziona in tutti i browser

Puoi animare questa proprietà:

$ ("# myElement"). animate ((opacity: .4), 1000, function () (// Animazione completata; questo codice funziona in tutti i browser.));

Funzione RGBA

Si prevede di supportare il canale alfa in CSS3 utilizzando 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

Analogamente alla funzione precedente, CSS3 consente anche di impostare un colore semitrasparente utilizzando la funzione HSLA, i cui parametri sono Hue, Saturation, Lightness e Alpha channel (Alpha).

#hsla (sfondo: hsla (207, 38%, 47%, .4);)

Un punto importante quando si utilizzano le funzioni rgba e hsla è che l'impostazione dell'opacità non viene applicata agli elementi figlio, mentre la proprietà dell'opacità viene ereditata.

La proprietà opacità CSS è responsabile della trasparenza degli elementi (immagini, testo, blocchi) in html.

Sintassi di opacità CSS

Dove il valore può assumere valori reali nell'intervallo da 0,0 a 1,0. Un valore di 1.0 significa nessuna trasparenza (impostazione predefinita).

Esempio 1. Immagine trasparente in html

La prima immagine viene visualizzata senza trasparenza, la seconda con 0,5 trasparenza

Traslucenza dell'elemento

Rendere l'immagine semitrasparente al passaggio del mouse!

DemoScarica la fonte

Grazie per l'attenzione!

Articolo successivo
Come creare un blocco div a scorrimento?

orem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500, quando uno stampatore sconosciuto prese una cambusa di caratteri e la rimescolava per creare un libro campione di caratteri. È sopravvissuto non solo a cinque secoli, ma anche al salto nella composizione elettronica , rimanendo sostanzialmente invariato.È stato reso popolare negli anni '60 con il rilascio di fogli Letraset contenenti passaggi di Lorem Ipsum e, più recentemente, con software di desktop publishing come Aldus PageMaker che includono versioni di Lorem Ipsum.
È un fatto consolidato da tempo che un lettore sarà distratto dal contenuto leggibile di una pagina quando ne guarda il layout. Il punto nell'usare Lorem Ipsum è che ha una distribuzione più o meno normale delle lettere, invece di usare "Contenuto qui, contenuto qui", facendolo sembrare un inglese leggibile. Molti pacchetti di desktop publishing e editor di pagine Web ora utilizzano Lorem Ipsum come testo modello predefinito e una ricerca di "lorem ipsum" scoprirà molti siti Web ancora agli inizi. Varie versioni si sono evolute nel corso degli anni, a volte per caso, a volte di proposito (umorismo iniettato e simili).

Allora, oggi ne parleremo trasparenza in html pagine. Probabilmente ti sei imbattuto in blocchi pop-up trasparenti, che si tratti di una galleria fotografica o di moduli di accesso su alcuni siti Web popolari. Ci sono molti usi per la trasparenza in html. Quindi come si fa e dove può essere utilizzato?

Bene, per cominciare, capiamo che il nostro documento non ha solo un piano monitor: è, in generale, tridimensionale, come ho detto nell'articolo "Z-index". Di conseguenza, anche un livello completamente trasparente, se appare in cima allo stack di visualizzazione, bloccherà l'accesso al resto degli elementi. Questo è uno degli usi principali delle scatole trasparenti. Anche se di solito viene utilizzato un effetto di ombreggiatura, un livello completamente trasparente funzionerà allo stesso modo. Quindi, ad esempio, molte gallerie fotografiche popolari funzionano, è organizzato un livello ombreggiato in cui vengono visualizzate le foto e i controlli per esse. Il resto della pagina è "coperto" con uno strato (semi) trasparente, che blocca l'accesso a tutti gli altri elementi della pagina. Quelli. non sarai in grado di lasciare la pagina facendo clic su qualsiasi collegamento su di essa: tutto il testo è coperto da un underlay. Per tornare al corpo del sito, solitamente forniscono controlli per la chiusura della galleria, form di login, ecc. Controlla mostrando / nascondendo i blocchi trasparenti usando javascript. Qui, purtroppo, non c'è alternativa. Senza utilizzarlo, l'utente non vedrà affatto il blocco trasparente o non sarà in grado di chiuderlo senza lasciare la pagina corrente. Notare che le proprietà di visibilità o visualizzazione vengono utilizzate per questo.

Quindi, come è effettivamente organizzata la trasparenza in HTML? L'impostazione della trasparenza degli elementi non è generalmente inclusa nelle specifiche CSS, quindi è necessario utilizzare più istruzioni contemporaneamente per crearla. Alcuni browser (cioè) funzioneranno con un'opzione, altri con un'altra. Cioè utilizza la funzionalità di filtro incorporata, altri browser utilizzano la proprietà "opacità", che va da 0 (oggetto completamente trasparente) a 1 (completamente opaco). Ad esempio, in caso di trasparenza del 30%, scrivi " opacità: 0,30; filtro: alfa (opacità = 30);". Le proprietà, come puoi vedere dall'esempio, sono simili: solo nel primo caso viene utilizzato un numero da 0 a 1, nel secondo una voce percentuale. Un esempio di tale blocco:

<stile div = "posizione: assoluta; alto: 0; sinistra: 0; colore di sfondo: rgb (18, 114, 214); larghezza: 100%; id = "VideoFrame">

L'esempio utilizza un blocco di visualizzazione video che viene attivato facendo clic su una miniatura del video. Al blocco non viene data un'altezza perché può essere diversa a seconda delle dimensioni dello schermo e del contenuto della pagina. A questo proposito, viene calcolato dinamicamente all'apertura del video. Un esempio dell'utilizzo di questa tecnica può essere visto nella pagina principale del sito ruscircus.ru, su cui ho lavorato un tempo.

Questo è l'intero segreto della trasparenza in html. Usiamo z-index e opacità per ottenere l'effetto di trasparenza. E puoi trovare molte applicazioni per questo: tutto qui è limitato solo dalla tua immaginazione.

08.02.2013 Risponderò alle domande poste nel commento, ovvero come realizzare un blocco opaco su un blocco trasparente. Qui tutto è semplice, non per niente ho indicato nel materiale un collegamento al materiale su z-index, è necessario creare un altro blocco, con uno z-index più grande di quello trasparente. Ora, in pochi minuti, ho abbozzato un esempio. Blocchi:

<stile div = "posizione: assoluta; alto: 0; sinistra: 0; colore di sfondo: rgb (18, 114, 214); larghezza: 100%; altezza: 100%; opacità: 0,30; filtro: alfa (opacità = 30); visibilità: nascosta; indice z: 1; " id = "VideoFrame"> <div id = stile "VideoFrame2" = "posizione: assoluta; in alto: 25%; a sinistra: 25%; colore di sfondo: bianco; larghezza: 50%; altezza: 50%; opacità: 0,99; filtro: alfa (opacità = 99); visibilità: nascosta; indice z: 2; " onclick = "javascript: HideForm ();" > Qui scriviamo il testo</ div>

E funzioni javascript

< script type= "text/javascript" >function ShowForm () (document.getElementById ("VideoFrame") .style .visibility = "visibile"; document.getElementById ("VideoFrame2") .style .visibility = "visibile";) function HideForm () (document.getElementById (" VideoFrame ") .style .visibility =" nascosto "; document.getElementById (" VideoFrame2 ") .style .visibility =" nascosto ";)

La prima funzione visualizza un blocco trasparente (insieme a un blocco di testo opaco) - può essere collegato a un pulsante. collegamento, ecc. La seconda funzione che ho è legata a un clic del mouse su un blocco con del testo: nasconde il blocco trasparente.

Spero di aver chiarito come funziona. Bene, se no, fai domande.