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 raggiungere 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, su questo momento questi sono tutti i modi che conosco per impostare un colore trasparente in css. Perché questo è necessario è un'altra domanda. Attraverso Sfondo trasparente quello che c'è sotto si vede. 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 stai lavorando con editor grafici allora probabilmente lo sai modalità colore rgb sta per rosso, verde e 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'è qualcos'altro? proprietà di 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 Background generale pagine. 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, ad esempio. Risulta così:

Ora lo sfondo del blocco è visibile e visibile attraverso di esso immagine di sfondo... Questa immagine e lo sfondo sono solo a scopo illustrativo. Come puoi immaginare, in sfondo css la trasparenza può tornare utile quando si desidera che lo sfondo di un elemento nidificato venga mostrato senza oscurare altri sfondi su altri livelli.

Imposta il colore stesso con usando rgba non difficile. Come già accennato, le prime tre lettere indicano tre colori primari: rosso, verde e blu, o meglio la loro quota (da 0 a 255). prescrizione significati diversi puoi ottenere milioni colori differenti e la traslucenza ti permetterà di ottenere molto di più bellissimi effetti per il sito, se necessario.

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 totale 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à vale per tutti elementi figlio genitore. Ciò significa che anche il testo su uno sfondo traslucido sarà traslucido. E questo è già molto svantaggio significativo, anche il testo non risalta.

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, è più alternativa 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 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 sul sito effetti interessanti... È 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 dato elemento 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.

Vlad Merzhevich

L'effetto di traslucenza dell'elemento è chiaramente visibile nell'immagine di sfondo e si è diffuso in diversi sistemi operativi perché sembra elegante e bello. Nel web design, la traslucenza viene applicata e ottenuta anche tramite la proprietà opacità o il formato colore RGBA impostato per lo sfondo.

Blocco gradiente

Realizzare il blocco mostrato in fig. 1. Il blocco contiene una cornice sfumata semitrasparente con uno sfondo sfumato sotto l'intestazione e un piccolo puntatore. Lo sfondo della pagina viene mostrato solo per chiarezza dell'effetto di traslucenza, puoi specificare una qualsiasi delle tue immagini. L'altezza minima del blocco è 100 px.

Come faccio a rendere semitrasparente un livello?

Per modificare l'opacità di un elemento, utilizzare la proprietà di stile opacità con un valore da 0 a 1, dove 0 corrisponde alla trasparenza totale e 1, al contrario, all'opacità dell'oggetto. Questa proprietà non funziona in Internet Explorer, quindi è necessario utilizzare un filtro specifico per essa, una proprietà che non fa parte delle specifiche CSS. L'esempio 1 mostra come impostare la trasparenza del livello per tutti i browser.

Sfondo traslucido

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 diversi modi E se ricordi tutto, inclusi i metodi antiquati, allora sta usando un'immagine PNG come sfondo, creando un'immagine a scacchi e la proprietà di opacità. Ma appena c'è da fare in blocco sfondo traslucido, questi metodi hanno uno spiacevole rovescio della medaglia... lo farò piccola panoramica per chiarire cosa in questione, così come per quei lettori che non hanno familiarità con opzioni non convenzionali per creare un effetto traslucido.

Come impostare la tabella su semitrasparente, ma alcune celle non lo sono?

Per modificare la trasparenza di un elemento in CSS3, è prevista la proprietà opacità, il suo valore può variare da 0 a 1. Zero corrisponde alla piena trasparenza dell'elemento, e uno, al contrario, all'opacità. Browser moderni funzionano abbastanza correttamente con questa proprietà, ad eccezione di browser Internet Explorer, quindi per questo devi usare una proprietà filtro speciale con il valore alfa (Opacità = X), dove X può variare da 0 a 100.

Determina il livello di trasparenza di un elemento della pagina web. Con trasparenza parziale o totale, l'elemento appare immagine di sfondo o altri elementi sotto l'oggetto traslucido.

brevi informazioni

designazioni

I valori

Il valore è un numero dell'intervallo. Un valore 0 corrisponde alla piena trasparenza dell'elemento, 1 al contrario alla sua opacità. Numeri frazionari il tipo 0.6 imposta la traslucenza. È consentito scrivere numeri senza zero iniziale, come l'opacità: .6.

sandbox

Winnie the Pooh non era sempre contrario a un piccolo rinfresco, soprattutto alle undici del mattino, perché a quell'ora la colazione era già finita da tempo, e il pranzo non aveva nemmeno pensato di iniziare. E, naturalmente, era terribilmente felice di vedere Coniglio tirare fuori tazze e piatti.

div (opacità: 1;)

Esempio

Risultato questo esempio mostrato in fig. uno.

Riso. 1. Risultato dell'uso dell'opacità

Modello oggetto

Un oggetto.stile.opacità

Nota

Firefox fino a 3.5 supporta la proprietà -moz-opacity.

Internet Explorer prima della versione 9.0 utilizza i filtri per modificare la trasparenza, per questo browser dovresti scrivere filter: alpha (opacità = 50), dove il parametro di opacità può assumere un valore da 0 a 100.

Specifiche

Ogni specifica passa attraverso diverse fasi di approvazione.

• Raccomandazione - Questa specifica è stata approvata dal W3C ed è raccomandata come standard.
• Raccomandazione del candidato ( Possibile raccomandazione ) - il gruppo responsabile dello standard è convinto che sia in linea con i suoi obiettivi, ma è necessario l'aiuto della comunità di sviluppatori per implementare lo standard.
• Raccomandazione proposta ( Raccomandazione suggerita) - A questo punto, il documento viene sottoposto al Consiglio consultivo del W3C per l'approvazione finale.
• Bozza di lavoro - Una versione più matura della bozza dopo la discussione e gli emendamenti per la revisione della comunità.
• Bozza dell'editore ( Bozza editoriale) - una bozza della norma dopo la modifica da parte degli editori del progetto.
• Brutta copia ( Bozza di specifica) è la prima bozza della norma.

/* 06.07.2006 */

Trasparenza CSS (opacità css, opacità javascript)

La trasparenza è l'argomento di questo articolo. Se sei interessato a come rendere trasparenti gli elementi della pagina html usando CSS o Javascript e come ottenere cross-browser (funziona allo stesso modo in browser diversi), dato Browser Firefox, Internet Explorer, Opera, Safari, Konqueror, allora sei il benvenuto. Inoltre, considera soluzione pronta cambiando gradualmente la trasparenza usando javascript.

Opacità CSS

Simbiosi di opacità CSS

Per simbiosi intendo unificazione stili diversi per browser diversi in uno Regola CSS per ottenere effetto desiderato, cioè. per l'implementazione cross-browser.

Filtro: progid: DXImageTransform.Microsoft.Alpha (opacità = 50); / * IE 5,5 + * / -moz-opacità: 0,5; / * Mozilla 1.6 e precedenti * / -khtml-opacity: 0.5; / * Konqueror 3.1, Safari 1.1 * // * CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 * /

In effetti, sono necessarie la prima e l'ultima regola, per IE5.5+ e browser che capiscono l'opacità CSS3, e le due regole nel mezzo ovviamente non fanno il tempo, ma non interferiscono realmente (decidi tu stesso se hai bisogno loro).

Simbiosi di opacità Javascript

Proviamo ora a impostare la trasparenza tramite uno script, tenendo conto delle peculiarità dei diversi browser sopra descritti.

Funzione setElementOpacity (sElemId, nOpacity) (var opacityProp = getOpacityProperty (); var elem = document.getElementById (sElemId); if (! Elem ||! OpacityProp) return; // Se l'elemento con l'id specificato non esiste o il browser non supporta nessuna delle funzioni note di come controllare la trasparenza if (opacityProp == "filtro") // Internet Exploder 5.5+ (nOpacity * = 100; // Se la trasparenza è già impostata, cambiala tramite la raccolta dei filtri, altrimenti aggiungi la trasparenza tramite style.filter var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")"; // Per non sovrascrivere altri filtri, usa "+ =") altro // Altri browser elem.style = nOpacity; ) funzione getOpacityProperty () (if (typeof document.body.style.opacity == "string") // Conforme a CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) restituire "opacità"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 e versioni precedenti, Firefox 0.8 restituisce "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\ d.] +); /)> = 5.5) // Internet Exploder 5.5+ return "filter"; restituire falso; // nessuna trasparenza }

La funzione accetta due argomenti: sElemId - l'id dell'elemento, nOpacity - un numero in virgola mobile da 0.0 a 1.0 che specifica l'opacità CSS3.

Penso che potrebbe valere la pena chiarire la parte relativa a IE della funzione setElementOpacity.

Var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")";

Ci si potrebbe chiedere perché non impostare la trasparenza assegnando (=) a elem.style.filter = "..."; ? Perché usare "+ =" per aggiungere una proprietà di filtro alla fine di una riga? La risposta è semplice, per non "sovrascrivere" altri filtri. Ma allo stesso tempo, se aggiungi un filtro in questo modo una seconda volta, non cambierà prima impostare i valori di questo filtro, ma verrà semplicemente aggiunto alla fine della linea di proprietà, il che non è corretto. Pertanto, se il filtro è già installato, è necessario manipolarlo tramite la raccolta di filtri applicati all'elemento: elem.filters (ma tieni presente che se il filtro non è stato ancora assegnato all'elemento, gestiscilo tramite questa collezione impossibile). È possibile accedere agli elementi della raccolta tramite il nome del filtro o l'indice. Tuttavia, il filtro può essere specificato in due stili, stile breve IE4 o stile IE5.5 +, che viene preso in considerazione nel codice.

Cambio graduale della trasparenza dell'elemento

Soluzione pronta. Utilizzo della libreria opacity.js

fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / fragola.jpg "larghezza =" 100 "altezza =" 80 "/> fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / tomato.jpg "larghezza =" 82 "altezza =" 100 "/> fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / sweet_cherry.jpg "larghezza =" 98 "altezza =" 97 "/>

Passaggi di base:

1. Colleghiamo la libreria di funzioni;
2. Definiamo le regole usando il metodo fadeOpacity.addRule();
3. Chiamare il metodo dissolvenzaOpacità () per modificare la trasparenza dal valore iniziale al valore finale, oppure dissolvenzaOpacity.back() ritornare a valore iniziale il livello di trasparenza.

Masticare

Come collegare la libreria, penso, può essere visto dall'esempio sopra. Ora vale la pena chiarire la definizione delle regole. Prima di chiamare i metodi per cambiare la trasparenza senza problemi, è necessario determinare le regole in base alle quali verrà eseguito il processo: è necessario definire la trasparenza iniziale e finale e, se lo si desidera, specificare il parametro di ritardo che influisce sulla velocità della trasparenza processo di cambiamento.

Le regole sono definite usando il metodo dissolvenzaOpacity.addRule

Sintassi: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argomenti:

• sRuleName - il nome della regola, impostato arbitrariamente;
• nStartOpacity e nFinishOpacity - trasparenza iniziale e finale, numeri nell'intervallo da 0.0 a 1.0;
• nDelay - ritardo in millisecondi (opzionale, il valore predefinito è 30).

La dissolvenza della trasparenza stessa viene chiamata tramite i metodi fadeOpacity (sElemId, sRuleName), dove sElemId è l'id dell'elemento e sRuleName è il nome della regola. Per restituire la trasparenza a lo stato iniziale viene utilizzato il metodo fadeOpacity.back (sElemId).

: passa il mouse per cambiare facilmente la trasparenza

Noto anche che per un semplice cambio di trasparenza (ma non un cambio graduale), lo pseudo-selettore è giusto : hover, che ti consente di definire gli stili per un elemento quando ci passi sopra con il mouse.

Nota che l'immagine è posizionata all'interno dell'elemento A. Il fatto è che Internet Explorer fino alla versione 6 comprende lo pseudo-selettore hover, solo applicato ai link, e non ad alcun elemento, come dovrebbe essere in CSS (in IE7 la situazione è fissa).

Trasparenza e testo frastagliato in IE

CON Rilascio di Windows XP ha introdotto l'anti-aliasing caratteri dello schermo metodo Cleartype e con esso gli effetti collaterali in IE quando si utilizza questo metodo di anti-aliasing. Nel nostro caso, se la trasparenza viene applicata a un elemento con testo quando il metodo di anti-aliasing ClearType è abilitato, il testo smette di essere visualizzato normalmente (testo in grassetto - grassetto, ad esempio, doppi, possono apparire anche vari artefatti, ad esempio sotto forma di linee, testo frastagliato). Per risolvere la situazione, per IE è necessario impostare un colore di sfondo, Proprietà CSS colore di sfondo, l'elemento a cui viene applicata la trasparenza. Fortunatamente, IE7 ha corretto il bug.