Photoshop cambia il colore in trasparente. Colore e sfondo trasparenti in CSS. Imposta la trasparenza per lo sfondo CSS

In alcuni casi, ad esempio, durante la progettazione di un sito web, potresti riscontrare una situazione in cui lo sfondo dell'immagine non corrisponde in alcun modo al colore del sito web stesso. La soluzione ovvia è rendere questo sfondo trasparente.

Avrai bisogno

• - Adobe Photoshop.

Istruzioni

La cosa principale è specificare l'immagine sul tuo computer o telefono, quindi fare clic su OK in fondo a questa pagina. Per impostazione predefinita, lo sfondo semplice dell'immagine viene sostituito con uno trasparente. Il colore di sfondo dell'immagine originale viene determinato automaticamente; devi solo specificare nelle impostazioni con quale colore sostituirlo. Il parametro principale che influenza la qualità della sostituzione è l'“Intensità di sostituzione” e può essere diverso per ciascuna immagine.

Un esempio di fotografia di una rosa rosa senza modifiche e dopo aver sostituito lo sfondo semplice con uno trasparente, bianco e verde:

Primo esempio con un fiore di rosa su sfondo trasparente realizzato con le seguenti ambientazioni:
  1) Intensità di sostituzione - 38;
  2) Levigatura lungo i bordi - 5;
  3) Sostituisci lo sfondo semplice con uno trasparente;
  4) Rifilatura (<0) или Добавление (>0) ai bordi - "-70";
  5) Inverti - disabilitato (non selezionato).

Per creare secondo esempio, con uno sfondo bianco, sono state utilizzate le stesse impostazioni del primo esempio, ad eccezione del parametro: "Sostituisci sfondo semplice con" - bianco. IN terzo esempio, con sfondo verde, anche le impostazioni vengono utilizzate come nel primo esempio, ad eccezione del parametro: “colore in formato esadecimale” - #245a2d.

L'immagine originale non viene modificata in alcun modo. Ti verrà fornita un'altra immagine elaborata con uno sfondo trasparente o specificato.

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

Metodo 1: valore trasparente

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

Colore: trasparente;

Tale testo non sarà visibile sulla pagina.

Metodo 2: modalità colore RGBA

E questa è un'innovazione CSS3. In precedenza, non esisteva tale modalità nello sviluppo web, c'era solo rgb. Sicuramente sai come registrare 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, aggiunge solo un quarto valore: il grado di trasparenza dell'elemento da 0 a 1. In generale, questo formato di registrazione viene utilizzato principalmente per impostare un colore traslucido, piuttosto che completamente trasparente. Per ottenere la massima 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. Ho già scritto qualcosa sull'impostazione della traslucenza per lo sfondo in , puoi leggerlo se 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 viene applicata. Pertanto, la leggibilità del testo e la percezione delle immagini si deteriorano. Quindi vedo l'utilità di utilizzare questa proprietà solo per i blocchi che non contengono testo o altre informazioni. I valori possono essere impostati da 0 a 1, come nel caso del quarto parametro quando si specifica un colore nel formato rgba.

In generale, al momento questi sono tutti i modi che conosco per impostare un colore trasparente nei CSS. Perché questo sia necessario è un'altra domanda. Attraverso uno sfondo trasparente si vede ciò che c'è sotto. A volte è necessario farlo in questo modo in base alla progettazione. In generale, la tecnica della traslucenza è molto comune oggi.

Sfondo trasparente

Come forse saprai, background è 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 avviene in modo molto semplice grazie a un formato di registrazione a colori come rgba. Se lavori con editor grafici, probabilmente sai che la modalità colore RGB significa: proporzione di rosso (rosso), proporzione di verde (verde) e blu (blu). Quindi, RGBA è praticamente lo stesso, viene aggiunto solo un altro parametro: la trasparenza. E' scritto così:

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

Per prima cosa indichiamo esplicitamente che stiamo impostando il colore in modalità rgba. Successivamente 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. Il valore da 0 a uno è scritto qui. 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 proprietà dello sfondo sulla trasparenza nei CSS. Per fare ciò è necessario utilizzare la modalità colore rgba. Esiste anche una proprietà di opacità, ma si applica all'intero elemento nel suo insieme. Cioè, quando si applica l'opacità, è possibile applicare la trasparenza al testo, rendendolo illeggibile.

Esempio di sfondo trasparente

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

Ora impostiamo lo stesso colore nero sul blocco, ma specifichiamolo utilizzando il formato colore rgba, specificando l'ultimo valore come 0,7, ad esempio. Risulterà così:

Ora lo sfondo del blocco è visibile attraverso di esso e l'immagine di sfondo è visibile attraverso di esso. Questa immagine e lo sfondo sono solo a titolo esemplificativo. Come puoi immaginare, in CSS la trasparenza dello sfondo può tornare utile quando vuoi che lo sfondo di un elemento nidificato sia visibile senza oscurare altri sfondi situati su altri livelli.

Impostare il colore stesso utilizzando RGBA non è difficile. Come già accennato, le prime tre lettere indicano i tre colori primari: rosso, verde e blu, o meglio la loro quota (da 0 a 255). Impostando valori diversi, puoi ottenere milioni di colori diversi e la traslucenza ti consentirà di ottenere effetti molto più belli per il sito, se necessario.