Vuoi imparare a creare pagine dal design moderno originale e sorprendente? L'uso di elementi traslucidi può aiutarti a risolvere questo difficile compito. Oggi esamineremo i principali modi pratici per impostare la trasparenza degli elementi strutturali.

Come impostare la trasparenza?

Se consideriamo questo argomento attraverso il prisma dello sviluppo storico delle tecnologie web, possiamo distinguere i seguenti approcci:

• Proprietà opacità.
• Utilizzo PNG-Immagini
• Formato di sistema RGBA
• Bene, e infine, antichità o immagini a scacchi.

Proprietà CSS Opacità

Applicare lo stile css proprietà opacità permette di impostare la trasparenza dell'elemento a cui è applicato. I valori che possono essere utilizzati come argomento vanno da 0 a 1.
Considera un esempio.

< html> < head> < title>TODO fornire un titolo < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >Ci sarà molto del tuo testo

/* Sfondo per il corpo della pagina */). trasparente (imbottitura: 10px; /*Rientri per il testo*/ sfondo: turchese scuro; /* Imposta il colore di sfondo */ margine: 0 automatico; /* Centrare il blocco */ larghezza: 50%; /* Imposta la larghezza del blocco */ opacità: 0,7 /* Imposta la trasparenza */ carattere: 48px/ 64px Times New Roman; text-align: giustifica; )

Di conseguenza, abbiamo ottenuto un blocco traslucido:

Importante!!!

1. Opacità prende valori dall'intervallo: 0 (trasparenza completa) - 1 (opacità).
2. browser incrociato. A CIOÈ fino alla settima versione compresa Opacità non supportato. Per ottenere la stessa visualizzazione dell'elemento, la seguente riga aiuterà:

   filtro: alfa(Opacità= 70 ) ;

   Va tenuto conto che la proprietà filtro assente in html specifiche, cambia i valori da 1 a 100 e può essere applicato solo agli elementi:

   • con posizionamento assoluto ( posizione: assoluta)
   • con una dimensione lineare fissa ( altezza o larghezza).
3. Il grado di trasparenza è ereditato dagli elementi figlio, per cui un elemento figlio può aumentare la trasparenza, ma non meno. Cioè, su uno sfondo traslucido, non è possibile creare testo NON TRASPARENTE.

Per una migliore comprensione del materiale dell'ultimo paragrafo, nell'esempio precedente, impostare il colore del testo su bianco

colore bianco;

ed esaminarlo al microscopio:

Come puoi vedere, anche il contenuto del nostro blocco (testo) è diventato traslucido. Ma cosa succede se in pratica non ti interessa la trasparenza del contenuto, ma solo la trasparenza dello sfondo? In tal caso, passa all'elemento successivo.

Utilizzo di un'immagine PNG

Una caratteristica interessante del formato PNGè che ha 256 livelli di trasparenza. Penso che tu abbia colto il filo del pensiero e di sicuro hai già costruito un algoritmo per questo approccio. Devo solo dargli voce.

Di conseguenza, abbiamo ottenuto un blocco con uno sfondo trasparente e contenuto opaco:

Importante!!!

1. A differenza della proprietà opacità la trasparenza è impostata solo per lo sfondo
2. browser incrociato. Funziona in quasi tutti i browser, il che è un vantaggio. Ma trasparenza PNG non supportato in IE6. Se ottimizzi il tuo sito per tale antichità, dovrai utilizzare altri metodi o script.
3. Quando disattivi la visualizzazione delle immagini, lo sfondo scompare (tienilo a mente quando ottimizzi la visualizzazione sui dispositivi mobili, perché Internet illimitato non è sempre a portata di mano).
4. Per modificare il colore e/o il grado di trasparenza, è necessario creare una nuova immagine e caricarla nuovamente sul server.

Formato di sistema RGBA

Uno dei metodi più moderni per modificare la trasparenza dello sfondo è l'uso del sistema RGBA.

RGBA– sistema di rappresentazione del colore tramite tre canali standard RGB(rosso, verde, blu), e il quarto, il cosiddetto Alfa-canale che caratterizza il grado di trasparenza.

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

Nell'esempio a noi già noto, sostituiremo il contenuto in css file al seguente:

body (sfondo: url(./ vaden-pro-logo. png) ; /* Immagine di sfondo */). prozrachen ( padding: 10px; background: rgba(0 , 206 , 209 , 0.7 ); margin: 0 auto; width: 50%; font: 48px/ 64px Times New Roman; color: white; text-align: justify; )

Importante!!!

1. A differenza della proprietà opacità la trasparenza è impostata solo sullo sfondo
2. A differenza del metodo PNG immagini, per cambiare il colore o il grado di trasparenza basta cambiare i valori rgba.
3. browser incrociato. Funziona con tutti i browser moderni (a partire da IE9, Op10, Fx3,Sf3.2). Per i browser meno recenti, dovrai sacrificare la trasparenza o applicare opacità, png metodi.

Immagini a scacchi, o rispetto alla storia

Questo metodo è stato all'origine del web design e ha visto i vecchi browser vecchi che non sapevano come fare. Consiste nel creare uno sfondo a scacchi in cui i quadrati colorati si alternano a quelli trasparenti.

Come risultato dell'applicazione di tale immagine come sfondo, è stato ottenuto uno sfondo pseudo-trasparente.

Importante!!!

1. Quando si visualizza il testo su uno sfondo del genere, gli occhi possono stancarsi rapidamente (soprattutto le increspature durante lo scorrimento).
2. In caso contrario, le funzionalità dell'applicazione sono simili al metodo "Immagini PNG".

Riassumere?

• Sotto il blocco trasparente dovrebbe esserci un'immagine luminosa, non monotona. Su uno sfondo semplice, l'evidenziazione della trasparenza viene persa.
• Quando scegli un approccio pratico specifico, lasciati guidare dai browser utilizzati dal tuo pubblico di destinazione. La compatibilità tra browser è importante.

In questa lezione daremo un'occhiata a questi 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à impostato nell'intervallo da 0,0 a 1,0, dove zero è la piena trasparenza e uno, al contrario, è l'opacità assoluta. Ad esempio, per vedere una trasparenza del 50%, è necessario impostare il valore su 0,5. Va tenuto presente che opacità si propaga a tutti gli elementi figlio del genitore. E questo significa che anche il testo su uno sfondo traslucido sarà traslucido. E questo è già uno svantaggio molto significativo, il testo non spicca così bene.

Lo screenshot mostra chiaramente che il testo nero è diventato traslucido come lo sfondo blu.

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

Trasparenza CSS in formato RGBA

Formato per scrivere il colore RGBA, è un'alternativa più moderna per la 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 influisce sugli elementi figlio.

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.

Il risultato dell'esempio 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 si sovrappongano a un motivo colorato, come una fotografia. Solo in questo caso l'effetto sarà evidente. Questa tecnica è stata utilizzata nel design per molto tempo, anche prima dell'avvento di qualsiasi altra CSS3, è stato implementato esclusivamente in programmi grafici.

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 ne risenta.

Conclusione

Formato RGBA supporta tutti i browser moderni tranne Internet Explorer. È anche molto importante che RGBA flessibile, agisce solo su un dato elemento specifico, senza intaccare i bambini. È chiaro che è più conveniente per il programmatore. La mia scelta è decisamente a favore del formato RGBA ricevere trasparenza in css.

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

Trasparenza CSS - soluzione cross-browser - 3,8 su 5 sulla base di 6 voti

In questo tutorial, esamineremo la trasparenza CSS, impareremo come dare trasparenza a vari elementi della pagina e raggiungeremo il cross-browser completo, ovvero lo stesso lavoro di questo effetto in browser diversi.

Come impostare la trasparenza di qualsiasi elemento

In CSS3, la proprietà opacity è responsabile della creazione di elementi trasparenti, che possono essere applicati a qualsiasi elemento. Questa proprietà ha valori da 0 a 1, che determinano il grado di trasparenza. Dove 0 è completamente trasparente (il valore predefinito per tutti gli elementi) e 1 è completamente opaco. I valori sono scritti come frazioni: 0,1, 0,2, 0,3, ecc.

Esempio di utilizzo:

Trasparenza tra browser

Non tutti i browser percepiscono e implementano la proprietà di opacità di cui sopra allo stesso modo. In alcuni casi è necessario utilizzare un nome di proprietà o filtri diversi.

La proprietà di opacità CSS3 è supportata dai seguenti browser Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Così bene :) Browser come Internet Explorer fino alla versione 9.0 non supporta la proprietà di opacità e per creare trasparenza per questo browser è necessario utilizzare la proprietà filter e il valore alpha(Opacity=X) dove X è un numero intero compreso tra 0 e 100 che determina il livello di trasparenza. 0 è la piena trasparenza e 100 è la piena opacità.

A partire da Firefox prima della versione 3.5, supporta la proprietà -moz-opacity invece dell'opacità.

Browser come Safari 1.1 e Konqueror 3.1, basati sul motore KHTML, usano la proprietà -khtml-opacity per controllare la trasparenza.

Come impostare la trasparenza in CSS in modo che appaia uguale in tutti i browser? Per creare una soluzione cross-browser per la trasparenza degli elementi, è necessario registrare non solo una proprietà di opacità, ma il seguente insieme di proprietà:

filtro: alfa(Opacità=50); /* Trasparenza per IE */ -moz-opacity: 0.5; /* Supporto per Mozilla 3.5 e precedenti */ -khtml-opacity: 0.5; /* Supporto per Konqueror 3.1 e Safari 1.1 */ opacità: 0.5; /* Supporto per tutti gli altri browser */

Trasparenza di vari elementi

Diamo un'occhiata ad alcuni esempi di impostazione della trasparenza su alcuni elementi che vengono utilizzati più spesso nella pagina.

Trasparenza dell'immagine CSS.

Considera diverse opzioni per creare un'immagine traslucida. Nell'esempio seguente, la prima immagine non ha trasparenza, la seconda ha il 50% di trasparenza e la terza ha il 30%.

Risultato:

Trasparenza nei CSS quando si passa il mouse sopra un'immagine.

Spesso è necessario rendere trasparente un'immagine o qualsiasi altro elemento nel momento in cui si passa il cursore su di essa. Questo può essere fatto usando la pseudo-classe CSS :hover. Per fare ciò, la nostra immagine deve registrare due classi, una ordinaria: questo sarà lo stato inattivo dell'immagine e la seconda classe con la pseudo-classe: passa con il mouse, qui devi specificare la trasparenza dell'immagine al momento di passando il cursore.

Puoi vedere il risultato nella demo.

Trasparenza dello sfondo CSS

Qui è necessario ricordare che la trasparenza si applica a tutti gli elementi nidificati e non possono avere più trasparenza dell'elemento nidificato.

Prendiamo ad esempio una variante con uno sfondo di pagina creato utilizzando un'immagine e un blocco con uno sfondo creato utilizzando il colore e avente una trasparenza del 50%.

Esempio di codice:

Ecco il risultato del codice sopra:

Vlad Merzevich

La trasparenza parziale, se usata correttamente, sembra molto impressionante nel design del sito web. La cosa principale è che sotto i blocchi traslucidi non dovrebbe esserci un motivo monocromatico, ma un'immagine, in questo caso la trasparenza diventa evidente. Questo effetto si ottiene in molti modi e, se ricordi tutto, inclusi i metodi vecchio stile, utilizza un'immagine PNG come sfondo, crea un'immagine a scacchi e la proprietà opacità. Ma non appena diventa necessario creare uno sfondo traslucido nel blocco, questi metodi hanno uno spiacevole aspetto negativo. Farò una breve recensione in modo che diventi chiaro qual è la posta in gioco, così come per quei lettori che non hanno familiarità con le opzioni non tradizionali per creare un effetto di traslucenza.

PNG come sfondo

Nell'editor grafico, viene preparato preliminarmente un disegno traslucido a un colore, che viene salvato nel 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 creare uno sfondo

Quindi aggiungiamo un'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. Applicazione di uno sfondo

Il browser legacy Internet Explorer 6 non funziona con la traslucenza in PNG-24, se per qualche motivo è necessario supportare questo browser, sarà necessario utilizzare gli script per esso.

Il metodo presentato presenta una serie di limitazioni. Quindi, quando disattivi le immagini nel browser, lo sfondo scompare del tutto. Inoltre, non è così facile cambiare il colore di sfondo e il valore della trasparenza, per questo dovrai modificare nuovamente l'immagine.

immagine a scacchi

Questo metodo appartiene agli antichi metodi di implementazione della traslucenza, quando i browser "non potevano fare nulla" e dovevi cercare soluzioni non basate su modelli. Il trucco è creare un'immagine che alterna pixel trasparenti e opachi (Figura 3). Una struttura così regolare crea l'effetto di traslucenza, essenzialmente imitandola.

Riso. 3. Motivo a scacchi ingrandito

Ecco come appare alla fine (Fig. 4).

Riso. 4. Imitazione della traslucenza

Gli svantaggi di questo metodo sono paragonabili al precedente, possono verificarsi anche motivi moiré e si verifica una degradazione del testo.

proprietà di opacità

La proprietà opacità CSS 3 imposta il valore di trasparenza e va da 0 a 1, dove zero è la trasparenza totale dell'elemento e uno, al contrario, è l'opacità. La proprietà opacità ha una caratteristica: la trasparenza è distribuita a tutti gli elementi figlio e non possono superare il valore di trasparenza del loro 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à del filtro specifica del browser. Naturalmente, risulta in un codice CSS non valido.

RGBA

L'approccio moderno è molto più semplice e visivo rispetto ai 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), l'ultima simboleggia il canale alfa e imposta la trasparenza dell'elemento. Il formato del record è questo.

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

Tra parentesi, al posto delle lettere, viene messo il valore della componente colore, può essere visualizzato in qualsiasi editor grafico, l'ultimo valore imposta la trasparenza e corrisponde al 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 mostrano correttamente la trasparenza. Per le versioni precedenti di IE, puoi specificare separatamente il colore nel suo formato abituale, mentre, ovviamente, non ci sarà trasparenza. Oppure usa di nuovo la proprietà filter, ma poi devi sopportare il fatto che la trasparenza influirà anche sul testo (esempio 3). Per applicare un codice CSS valido, ho usato 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 diventate più luminose e più chiare.

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

Div ( background-color: red; /* Non applicabile in IE7 */ background-color: rgba(255, 0, 0, 0.5); )

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

Div ( background: red; /* E questo funziona */ background: rgba(255, 0, 0, 0.5); ) Tuttavia, c'è un avvertimento. Il validatore CSS "giura" in background quando gli viene assegnato un valore RGBA. Ma allo stesso tempo, si applica correttamente a background-color . In generale, come sempre, devi scegliere tra browser e validità.

Come impostare il colore trasparente in CSS? Attualmente ci sono 3 modi per farlo.

Metodo 1 - valore trasparente

Se imposti il ​​colore del testo o dello sfondo su transparent , il colore sarà completamente trasparente, ovvero invisibile. Esempio:

colore: trasparente;

Tale testo non sarà visibile sulla pagina.

Metodo 2: modalità colore RGB

E questa è già un'innovazione css3. In precedenza, non esisteva una modalità del genere nello sviluppo web, c'era solo rgb. Sicuramente sai come scrivere il colore in questo formato. Per fare ciò, è necessario specificare tre valori tra parentesi da 0 a 255, che indicano la saturazione di uno dei tre colori primari (rosso, verde, blu). Per 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 impostare un colore semitrasparente e 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.

È possibile impostare un colore traslucido se il quarto parametro è impostato su un valore compreso tra 0,01 e 0,99. O ho già scritto qualcosa sull'impostazione della traslucenza per lo sfondo in , puoi leggerlo se sei interessato.

Metodo 3: opacità

Un'altra proprietà della tecnologia CSS3. Ma voglio avvertirti subito che funziona in modo leggermente diverso. Con l'opacità, la trasparenza viene impostata sull'intero blocco a cui è applicata. Pertanto, la leggibilità del testo e la percezione delle immagini si deteriorano. Quindi vedo il punto nell'usare la proprietà solo per i blocchi in cui non c'è testo e alcune 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. Attraverso uno sfondo trasparente si può vedere cosa c'è sotto. A volte deve essere fatto in questo modo in base alla progettazione. In generale, la tecnica con traslucenza è oggi molto comune.

Sfondo trasparente (sfondo)

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

Imposta la trasparenza per lo sfondo CSS

Quindi, tutto questo viene fatto in modo molto semplice grazie a un formato di registrazione a colori come rgba . Se lavori con editor grafici, probabilmente saprai che la modalità colore rgb è decodificata come segue: la proporzione di rosso (rosso), la proporzione di verde (verde) e blu (blu). Quindi, rgba è quasi lo stesso, viene aggiunto solo un altro parametro: la trasparenza. Si scrive così:

Colore di sfondo: rgba(173, 57, 22, 0.5)

Innanzitutto, indichiamo esplicitamente che stiamo impostando il colore in modalità rgba. Quindi indichiamo 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 il valore viene scritto da 0 a uno. 1 è un elemento completamente opaco e 0 è un elemento 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 una proprietà di opacità, ma si applica all'intero elemento nel suo insieme. Cioè, quando si applica l'opacità, la trasparenza può essere applicata anche al testo, il che lo renderà illeggibile.

Esempio di sfondo trasparente

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

E ora impostiamo lo stesso colore nero sul blocco, ma lo specifichiamo usando il formato colore rgba, specificando l'ultimo valore come 0.7, per esempio. Risulterà così:

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

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