Rendi trasparente il colore CSS. Colore trasparente in CSS e modi per impostarlo

Vuoi imparare a creare pagine dal design moderno, originale e luminoso? L'uso di elementi traslucidi può aiutarti a risolvere questo difficile problema. 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 del sistema RGBA
• Bene, e infine, antichità o immagini a scacchi.

Proprietà Opacità CSS

Applicazione dello stile CSS proprietà opacità permette di impostare la trasparenza dell'elemento a cui viene applicato. I valori che possono essere utilizzati come argomento vanno da 0 a 1.
Diamo un'occhiata a 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 qui

/* Sfondo per il corpo della pagina */). trasparente (imbottitura: 10px; /*Rientri per il testo*/ sfondo: turchese scuro; /* Imposta il colore dello 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; allineamento testo: giustifica; )

Di conseguenza, abbiamo ottenuto un blocco traslucido:

Importante!!!

1. Opacità assume valori nell'intervallo: 0 (trasparenza totale) – 1 (opacità).
2. Compatibilità tra browser. IN CIOÈ. fino alla versione sette inclusa Opacità non supportato. La riga seguente aiuterà a ottenere la stessa visualizzazione dell'elemento:

   filtro: alpha(Opacità= 70) ;

   Vale la pena tenere conto della proprietà filtro mancante da 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 viene ereditato dagli elementi figlio e un elemento figlio può aumentare la propria trasparenza, ma non può ridurla. Cioè, non è possibile creare testo NON TRASPARENTE su uno sfondo traslucido.

Per una migliore comprensione di quanto spiegato nell'ultimo paragrafo, nell'esempio precedente imposteremo il colore del testo su bianco

colore bianco;

e guardalo 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 quella dello sfondo? In questo caso passate al punto successivo.

Utilizzo di immagini PNG

Una caratteristica interessante del formato PNGè che ha 256 livelli di trasparenza. Penso che tu abbia colto il filo del discorso e probabilmente hai già creato un algoritmo su come funziona questo approccio. Tutto quello che posso fare è dargli voce.

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

Importante!!!

1. A differenza della proprietà opacità la trasparenza è impostata solo per lo sfondo
2. Compatibilità tra browser. Funziona con 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 scomparirà (tieni presente questo punto 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 sul server.

Formato del sistema RGBA

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

RGBA– sistema di rappresentazione del colore utilizzando 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 sostituiamo il contenuto in CSS file al seguente:

corpo ( sfondo: url(./ vaden- pro- logo. png) ; /* Immagine di sfondo */). prozrachen ( imbottitura: 10px; sfondo: rgba(0 , 206 , 209 , 0.7 ) ; margine: 0 automatico; larghezza: 50%; carattere: 48px/ 64px Times New Roman; colore: bianco; allineamento testo: giustifica; )

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. Compatibilità tra browser. Funziona con tutti i browser moderni (da IE9, Op10, Fx3,Sf3.2).Per i browser più vecchi dovrai sacrificare la trasparenza o l'utilizzo opacità, png metodi.

Immagini a scacchi, o rispetto alla storia

Questo metodo era alle origini del web design e vedeva vecchi, vecchi browser che non potevano davvero fare nulla. Consiste nel creare uno sfondo a quadretti in cui si alternano quadrati colorati a quadrati trasparenti.

Come risultato dell'utilizzo di tale immagine come sfondo, è stato ottenuto uno sfondo pseudotrasparente.

Importante!!!

1. Quando si visualizza il testo su uno sfondo simile, i tuoi occhi possono stancarsi rapidamente (le increspature durante lo scorrimento sono particolarmente opprimenti).
2. Per il resto, le funzionalità dell'applicazione sono simili al metodo "Immagine PNG".

Riassumiamo?

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

Trasparenza CSS: soluzione cross-browser - 3,8 su 5 basato su 6 voti

In questa lezione esamineremo la trasparenza CSS, impareremo come dare trasparenza ai vari elementi della pagina e ottenere la piena compatibilità tra browser, ovvero questo effetto funzionerà allo stesso modo in browser diversi.

Come impostare la trasparenza di qualsiasi elemento

Nei CSS3, la proprietà opacità è 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 è la trasparenza completa (il valore predefinito per tutti gli elementi) e 1 è l'opacità completa. I valori sono scritti come frazioni: 0,1, 0,2, 0,3, ecc.

Esempio di utilizzo:

Trasparenza su più browser

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

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

Ottimo :) un browser come Internet Explorer fino alla versione 9.0 non supporta la proprietà opacità e per creare trasparenza per questo browser è necessario utilizzare la proprietà filter e il valore alpha(Opacity=X), in cui X è un numero intero in l'intervallo da 0 a 100, che determina il livello di trasparenza. 0 è completamente trasparente e 100 è completamente opaco.

A partire dalla versione 3.5 di Firefox, supporta la proprietà -moz-opacity invece di opacity.

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

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

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

Trasparenza dei 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.

Diamo un'occhiata a diverse opzioni per creare un'immagine traslucida. Nell'esempio seguente, per la prima immagine non è impostata alcuna trasparenza, per la seconda una trasparenza del 50% e per la terza del 30%.

Risultato:

Trasparenza nei CSS quando si passa sopra un'immagine.

Spesso è necessario rendere trasparente un'immagine o qualsiasi altro elemento nel momento in cui il cursore vi passa sopra. Puoi farlo usando la pseudo-classe CSS:hover. Per fare ciò, alla nostra immagine devono essere assegnate due classi, una normale - questo sarà lo stato inattivo dell'immagine e la seconda classe con la pseudo-classe: passa il mouse, qui devi specificare la trasparenza dell'immagine al momento di posizionare il cursore.

Puoi vedere il risultato nella demo.

Trasparenza dello sfondo utilizzando CSS.

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

Ad esempio, daremo una variante con uno sfondo della pagina creato utilizzando un'immagine e un blocco con uno sfondo creato utilizzando il colore e con una trasparenza del 50%.

Codice d'esempio:

Ecco il risultato del codice pubblicato sopra:

Avrai bisogno

• -Programma Photoshop
• - un'immagine che deve avere uno sfondo traslucido.
• - sapere come creare un nuovo livello
• - essere in grado di utilizzare lo strumento Riempimento e disegnare forme in Photoshop

Istruzioni

Fai doppio clic sul nome del livello con l'immagine e nel campo visualizzato scrivi l'eventuale nuovo nome per questo livello. Ciò è necessario per spostare liberamente questo livello e ottenere uno sfondo trasparente quando si rimuovono parti dell'immagine. Se l'immagine ha già uno sfondo opaco e uniforme, selezionalo con lo strumento Bacchetta magica. Per fare ciò, seleziona questo strumento nella barra degli strumenti e fai clic sul colore di sfondo, dopodiché verrà selezionato tutto il colore specificato (su cui è stato cliccato il mouse) all'interno dell'area racchiusa. Elimina la selezione premendo il tasto Elimina.

Se non è uniforme, seleziona l'immagine stessa con lo strumento "Rettilineo" o "Penna". Se selezioni un'immagine con lo strumento Penna, disponi il percorso desiderato e, se necessario, modificalo con lo strumento Penna+. Durante la modifica con questo strumento, puoi aggiungere punti di ancoraggio facendo clic sul percorso creato e, spostando i punti, modificarlo. Quindi, senza rimuovere il cursore dal percorso, fare clic con il pulsante destro del mouse e selezionare "Crea selezione". Imposta il valore Sfumatura su 0 pixel e seleziona l'opzione Levigatura. Come risultato di queste azioni, il percorso verrà convertito in una selezione. Elimina la selezione premendo il tasto Elimina.

Crea un nuovo livello e posizionalo sotto il livello dell'immagine. Con il cursore sopra, fare clic con il pulsante sinistro del mouse e, senza rilasciare il pulsante, spostare il cursore sotto il livello con l'immagine. In questo modo, trascinerai un nuovo livello sotto il livello dell'immagine. Sotto l'immagine stessa, crea uno sfondo opaco del colore e della forma desiderati.

Buona giornata, fanatici dello sviluppo web e neofiti. Per chi non segue le tendenze informatiche, o meglio la moda del web, vi informo solennemente che questa pubblicazione sull'argomento: “Come realizzare un blocco trasparente con gli strumenti css” fa al caso vostro. In effetti, nell'attuale 2016, l'introduzione di vari oggetti trasparenti nei servizi online è considerata una mossa di stile.

Pertanto, in questo articolo ti parlerò di tutti i metodi esistenti per creare trasparenza, a partire dalle soluzioni antidiluviane, mi concentrerò sulla compatibilità delle soluzioni con i browser e fornirò anche esempi specifici di codice di programma. Ora mettiamoci al lavoro!

Metodo 1. Antidiluviano

Quando i computer erano ancora deboli e le “capacità” non erano ancora sviluppate, gli sviluppatori hanno escogitato un modo tutto loro per creare uno sfondo trasparente: utilizzando pixel trasparenti alternati a pixel colorati. Il blocco creato in questo modo sembrava una scacchiera quando veniva ridimensionato, ma a dimensioni normali assomigliava a una sorta di trasparenza.

Questa, a mio avviso, "stampella" aiuta sicuramente nelle versioni precedenti dei browser in cui le soluzioni moderne non funzionano. Ma vale la pena notare che la qualità di visualizzazione del testo , inscritto in tale, cade bruscamente.

Metodo 2. Non disturbato

In rari casi, gli sviluppatori risolvono il problema dell'introduzione di un'immagine traslucida inserendo... un'immagine traslucida già pronta! A questo scopo vengono utilizzate immagini salvate in formato PNG-24. Questo formato grafico consente di impostare 256 livelli di traslucenza.

Tuttavia questo metodo non è conveniente per diversi motivi:

1. Internet Explorer 6 non funziona con questa tecnologia; è necessario scrivere il codice script per essa;
2. Non puoi cambiare i colori di sfondo nei CSS;
3. Se la funzione di visualizzazione delle immagini del browser è disabilitata, questa scomparirà.

Metodo 3. Promosso

Il modo più comune e conosciuto per rendere trasparente un blocco è la proprietà opacità.

Il valore del parametro varia nell'intervallo in cui a 0 l'oggetto è invisibile e a 1 è completamente visibile. Tuttavia, anche qui ci sono alcuni momenti spiacevoli.

Innanzitutto, tutti gli elementi figlio ereditano la trasparenza. Ciò significa che anche il testo inserito “risplenderà” insieme allo sfondo.

In secondo luogo, Internet Explorer ancora una volta “storce il naso” e, fino alla versione 8, non funziona opacità.

Per risolvere questo problema, utilizzare filtro:alfa (Opacità=valore).

Diamo un'occhiata a un esempio.

Metodo 4. Moderno

Oggi i professionisti utilizzano lo strumento rgba (r, g, b, a).

In precedenza, ti ho detto che RGB è uno dei modelli di colore più popolari, dove R è responsabile di tutte le sfumature del rosso, G delle sfumature del verde e B delle sfumature del blu.

Nel caso del parametro CSS la variabile A è responsabile del canale alfa, che a sua volta è responsabile della trasparenza.

Il vantaggio principale di quest'ultimo metodo è che il canale alfa non influisce sugli oggetti situati all'interno del blocco stilizzato.

rgba(r, g, b, a) è supportato a partire da:

• Opera versione 10;
• Internet Explorer 9;
• Safari3.2;
• 3 versioni di Firefox.

Vorrei sottolineare un fatto interessante! L'amato Internet Explorer 7 genera un errore durante la combinazione delle proprietà colore di sfondo con il nome dei colori (colore-fondo: oro). Pertanto, dovresti usare solo:

colore di sfondo: rgba (255, 215, 0, 0,15)

E ora un esempio.

Tieni presente che il contenuto testuale del blocco è completamente visibile (100% nero), mentre lo sfondo è impostato su un canale alfa di 0,88, ovvero 88%.

La proprietà CSS RGBa consente di impostare un colore di sfondo con un canale alfa (ovvero riempire i blocchi con un colore semitrasparente).

Naturalmente, i CSS hanno una proprietà di opacità, ma il suo principale svantaggio è che anche tutti gli elementi figli all'interno di un blocco trasparente erediteranno la sua opacità.

Molto spesso, utilizzano PNG24 da un pixel per riempire lo sfondo di un elemento e correggere la trasparenza in IE6, oppure rendere lo sfondo trasparente utilizzando l'opacità CSS. Il testo è posizionato separatamente in un altro elemento, ma questo, secondo me, non è del tutto conveniente...

Usando RGBa la soluzione è simile a questa:

1. Diciamo che abbiamo bisogno di uno sfondo blu con una trasparenza del 50%.

Ma IE6–8, Opera 9.x, Mozilla Firefox 2.x non lo supporteranno

2. Per IE, puoi provare a farlo in modo più elegante:

Nota: Il colore nel filtro è specificato da 8 numeri. I primi 2 numeri rappresentano il grado di trasparenza: FF - completamente opaco, 00 - trasparente. I successivi 6 numeri sono la consueta designazione del colore HTML.

L'uso di RGBa non si limita solo al colore di sfondo dei blocchi...