Come impostare il colore trasparente in css? Al momento, ci sono 3 modi per farlo.

Metodo 1 - il valore trasparente

Se imposti il ​​valore del testo o del colore di sfondo su trasparente, il colore sarà completamente trasparente, cioè invisibile. Esempio:

Colore: trasparente;

Tale testo non sarà visibile nella pagina.

Metodo 2 - modalità colore rgba

E questa è già un'innovazione css3. In precedenza, non esisteva tale modalità nello sviluppo web, c'era solo rgb. Probabilmente sai come scrivere il colore in questo formato. Per fare ciò, è necessario specificare tra parentesi tre valori da 0 a 255, che indicano la saturazione di uno dei tre colori primari (rosso, verde, blu). Ad esempio:

Sfondo: RGB (230, 121, 156);

Il formato rgba non è diverso, viene aggiunto solo un quarto valore: il grado di trasparenza dell'elemento da 0 a 1. In generale, questo formato di notazione viene utilizzato principalmente per specificare un colore semitrasparente, non completamente trasparente. Per ottenere la piena trasparenza, devi solo scrivere 0 come quarto valore.

Sfondo: rgba (0, 0, 0, 0);

In questo caso, le restanti 3 cifre non svolgono un ruolo speciale.

Il colore semitrasparente può essere impostato se il quarto parametro è impostato su un valore compreso tra 0,01 e 0,99. Ho già scritto un po' sull'impostazione della traslucenza dello sfondo, puoi leggerlo se sei interessato.

Metodo 3 - opacità

Un'altra proprietà della tecnologia CSS3. Ma voglio avvertirti subito che funziona in modo leggermente diverso. L'opacità viene utilizzata per impostare l'opacità sull'intero blocco a cui è applicata. Pertanto, la leggibilità del testo e la percezione delle immagini si deteriorano. Quindi, vedo il significato di applicare la proprietà solo per i blocchi in cui non c'è testo o altre informazioni. I valori possono essere impostati da 0 a 1, come nel caso del quarto parametro quando si specifica un colore in formato rgba.

In generale, al momento questi sono tutti i modi che conosco per impostare un colore trasparente in css. Perché questo è necessario è un'altra domanda. Quello che c'è sotto può essere visto attraverso lo sfondo trasparente. A volte questo deve essere fatto in base alla progettazione. In generale, la tecnica con traslucenza è oggi molto comune.

Sfondo trasparente

Come probabilmente saprai, lo sfondo è una proprietà CSS che ti consente di impostare un colore di sfondo o caricare un'immagine che funga da sfondo.

Imposta la trasparenza per lo sfondo CSS

Quindi, tutto questo è molto semplice grazie al formato di notazione del colore rgba. Se lavori con editor grafici, probabilmente saprai che la modalità colore rgb viene decifrata come segue: proporzione di rosso (rosso), proporzione di verde (verde) e blu (blu). Quindi, rgba è praticamente lo stesso, viene aggiunto solo un altro parametro: la trasparenza. È scritto così:

Colore di sfondo: rgba (173, 57, 22, 0,5)

Innanzitutto, indichiamo esplicitamente che stiamo impostando il colore in modalità rgba. Quindi specifichiamo i valori di saturazione dei tre colori primari da 0 a 255, dove 255 è la saturazione più alta. Il quarto parametro è la nostra trasparenza. Qui viene scritto un valore da 0 a uno. 1 è completamente opaco e 0 è completamente trasparente. Di conseguenza, se lo imposti su 0, il colore di sfondo non sarà affatto visibile.

Ora sai come impostare la trasparenza per la proprietà background in css. Per fare ciò, è necessario utilizzare la modalità colore rgba. C'è anche la proprietà opacità, ma si applica all'intero elemento nel suo insieme. Cioè, quando viene applicata l'opacità, la trasparenza può essere applicata anche al testo, rendendolo illeggibile.

Sfondo trasparente per esempio

I vantaggi di uno sfondo traslucido sono facili da mostrare con un esempio. Ad esempio, abbiamo uno sfondo generale per una pagina. Ecco come apparirebbe il blocco se gli fosse assegnato un colore nero solido:

Ora impostiamo lo stesso colore nero al blocco, ma indichiamolo utilizzando il formato colore rgba, specificando l'ultimo valore in 0.7, per esempio. Risulta così:

Ora lo sfondo del blocco è visibile attraverso di esso e attraverso di esso puoi vedere l'immagine di sfondo. Questa immagine e lo sfondo sono solo a scopo illustrativo. Come puoi immaginare, la trasparenza nello sfondo CSS può tornare utile quando hai bisogno che lo sfondo di un elemento nidificato venga mostrato senza oscurare altri sfondi situati in altri livelli.

Non è difficile impostare il colore stesso usando rgba. Come già accennato, le prime tre lettere indicano tre colori primari: rosso, verde e blu, o meglio la loro quota (da 0 a 255). Prescrivendo valori diversi, puoi ottenere milioni di colori diversi e la traslucenza ti consentirà di creare molti bellissimi effetti per il sito, se necessario.

Grado 1 Grado 2 Grado 3 Grado 4 Grado 5

Dettagli Categoria: Web Designer Autore: SEO & WEB - KELL4

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.

In questa lezione analizzeremo tali CSS proprietà - opacità e RGBA... Proprietà Opacitàè responsabile solo della trasparenza degli elementi, e della funzione RGBA- per colore e trasparenza, se si specifica il valore di trasparenza del canale alfa.

Opacità CSS

Valore numerico per opacità specificato nell'intervallo da 0,0 a 1,0, dove zero è la trasparenza completa e uno, al contrario, è l'opacità assoluta. Ad esempio, per vedere il 50% di trasparenza, è necessario impostare il valore su 0,5. Va tenuto presente che opacità si estende a tutti i figli del genitore. Ciò significa che anche il testo su uno sfondo traslucido sarà traslucido. E questo è già uno svantaggio molto significativo, il testo non risalta così bene.

Nello screenshot, puoi vedere chiaramente che il testo nero è diventato lo stesso traslucido dello sfondo blu.

Div (
sfondo: url (immagini / tuaimmagine.jpg); / * Immagine di sfondo * /
larghezza: 750 px;
altezza: 100px;
margine: automatico;
}
.blu (
sfondo: # 027av4; / * Colore di sfondo semitrasparente * /
opacità: 0,3; / * Valore di traslucenza dello sfondo * /
altezza: 70px;
}
h1 (
imbottitura: 6px;
famiglia di caratteri: Arial Black;
font-weight: più audace;
dimensione del carattere: 50px;
}

Trasparenza CSS in formato RGBA

Formato per la registrazione del colore RGBA, è un'alternativa più moderna alla proprietà opacità. R (rosso), G (verde), B (blu)- significa: rosso, verde, blu. L'ultima lettera UN- indica il canale alfa, che imposta la trasparenza. RGBA a differenza di Opacità non colpisce i bambini.

Ora diamo un'occhiata al nostro esempio usando RGBA... Sostituiamo queste linee negli stili.

Sfondo: ## 027av4; /* Colore di sfondo */
opacità: 0,3; / * valore di traslucenza dello sfondo * /

alla riga successiva

Sfondo: rgba (2, 127, 212, 0.3);

Come puoi vedere, il valore di trasparenza di 0,3 è lo stesso per entrambi i metodi.

Risultato dell'esempio con RGBA:

Il secondo screenshot sembra molto meglio del primo.

Giocando con la traslucenza dello sfondo dei blocchi, puoi ottenere effetti interessanti sul sito. È importante che questi blocchi traslucidi ricoprano un design variegato come una fotografia. Solo in questo caso l'effetto sarà evidente. Questa tecnica è stata a lungo utilizzata nel design, anche prima della comparsa di qualsiasi CSS3, è stato implementato esclusivamente in programmi di grafica.

Se il cliente richiede che il layout abbia un bell'aspetto nelle versioni precedenti del browser Internet Explorer quindi aggiungi proprietà filtro e non dimenticare di commentare in modo che la validità del codice non sia compromessa.

Conclusione

Formato RGBA sono supportati da tutti i browser moderni tranne Internet Explorer... È anche molto importante che RGBA flessibile, agisce solo su uno specifico elemento specificato, senza influenzare i bambini. È chiaro che questo è più conveniente per il progettista di layout. La mia scelta è nettamente a favore del formato RGBA per ottenere trasparenza nei CSS.

Per un migliore consolidamento del materiale e una maggiore chiarezza, ti consiglio di passare.

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.

Vlad Merzhevich

La trasparenza parziale, se utilizzata correttamente, sembra molto impressionante nel design del sito web. La cosa principale è che sotto i blocchi traslucidi non c'è un motivo monocolore, ma un'immagine, in questo caso la trasparenza diventa evidente. Questo effetto si ottiene in modi diversi e, se ricordi tutto, inclusi i metodi antiquati, utilizza un'immagine PNG come sfondo, creando un'immagine a scacchi e la proprietà di opacità. Ma non appena diventa necessario creare uno sfondo traslucido in un blocco, questi metodi hanno uno spiacevole svantaggio. Farò una piccola panoramica in modo che diventi chiaro cosa è in gioco, così come per quei lettori che non hanno familiarità con le opzioni non convenzionali per creare l'effetto di traslucenza.

PNG come sfondo

Un disegno semitrasparente a un colore viene preparato preliminarmente in un editor grafico, che viene salvato in formato PNG-24 (Fig. 1). Una caratteristica di questo formato è il supporto per 256 livelli di trasparenza o, semplicemente, può visualizzare immagini traslucide.

Riso. 1. Immagine per la creazione dello sfondo

Quindi aggiungiamo l'immagine come sfondo tramite la proprietà background, come mostrato nell'esempio 1.

Esempio 1. Utilizzo di un motivo traslucido

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. 3.

Riso. 2. Applicare uno sfondo

Il browser Internet Explorer 6 obsoleto non funziona con la traslucenza in PNG-24, se per qualche motivo hai bisogno di supportare questo browser, dovrai utilizzare gli script per questo.

Questo metodo ha una serie di limitazioni. Quindi, quando disattivi le immagini nel browser, lo sfondo scomparirà del tutto. Inoltre, non è così facile cambiare il colore di sfondo e il valore di trasparenza, per questo dovrai modificare di nuovo l'immagine.

Immagine a scacchi

Questo metodo appartiene alle antichissime modalità di implementazione della traslucenza, quando i browser "non potevano fare nulla" e dovevano cercare soluzioni non convenzionali. Il trucco è creare un'immagine che alterna pixel trasparenti e opachi (Figura 3). Questa struttura regolare crea un effetto traslucido, essenzialmente imitandolo.

Riso. 3. Motivo a scacchi ingrandito

Ecco come appare alla fine (Fig. 4).

Riso. 4. Simulazione della traslucenza

Gli svantaggi di questo metodo sono paragonabili a quello precedente; può verificarsi anche un motivo moiré e il testo si deteriora.

Proprietà di opacità

La proprietà opacity CSS 3 imposta il valore di opacità e varia da 0 a 1, dove zero è la trasparenza completa dell'elemento e uno è opaco. La proprietà opacità ha una caratteristica speciale: la trasparenza è estesa a tutti i figli e non possono superare il valore di trasparenza del genitore. Si scopre che non può esserci testo opaco su uno sfondo traslucido (esempio 2).

Esempio 2. Utilizzo dell'opacità

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Il risultato dell'esempio è mostrato in Fig. 5.

Riso. 5. Traslucenza del testo e dello sfondo

In Internet Explorer fino alla versione 8.0 inclusa, l'opacità non funziona, quindi utilizza la proprietà di filtro specifica del browser. Naturalmente, porta a CSS non validi.

RGBA

L'approccio moderno è molto più semplice e chiaro dei metodi precedenti e consiste nell'utilizzare il formato RGBA per il colore e lo sfondo. Le prime tre lettere sono familiari a molti e stanno per rosso, verde, blu (rosso, verde, blu), quest'ultimo simboleggia il canale alfa e imposta la trasparenza dell'elemento. Il formato di registrazione è il seguente.

colore di sfondo: rgba (r, g, b, a);

Il valore della componente colore è messo tra parentesi al posto delle lettere, può essere visualizzato in qualsiasi editor grafico, l'ultimo valore imposta la trasparenza e coincide con il valore della proprietà opacità.

Non tutti i browser supportano questo formato: Internet Explorer dalla versione 9, Opera dalla versione 10, Firefox dalla 3, Safari dalla 3.2. Ma in generale, i browser moderni rendono la trasparenza correttamente. Per le versioni precedenti di IE, puoi specificare separatamente il colore nel solito formato, mentre, ovviamente, non ci sarà trasparenza. O ancora, usa la proprietà filter, ma poi devi sopportare anche la trasparenza del testo (esempio 3). Per mantenere un CSS valido, ho utilizzato i commenti condizionali.

Esempio 3. Utilizzo di RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Il risultato dell'esempio è visibile in Fig. 6.

Riso. 6. Sfondo semitrasparente con testo opaco

Confronta l'immagine con la precedente, le lettere sono più luminose e chiare.

In Internet Explorer 7, è stato rilevato un bug durante la combinazione del colore di sfondo con valori diversi. Ad esempio, se imposti il ​​colore di sfondo su rosso, come mostrato di seguito, lo sfondo in IE7 non verrà visualizzato affatto.

Div (colore di sfondo: rosso; / * Non si applica in IE7 * / colore di sfondo: rgba (255, 0, 0, 0,5);)

Questo viene risolto sostituendo la proprietà background-color con background.

Div (sfondo: rosso; / * E funziona * / background: rgba (255, 0, 0, 0,5);) Tuttavia, c'è un avvertimento. Il validatore CSS “giura” in background se gli viene dato un valore in formato RGBA. Ma allo stesso tempo si riferisce correttamente al colore di sfondo. In generale, come sempre, devi scegliere tra browser e validità.