Una pagina web è realizzata con due lingue front-end di base: HTML e CSS. Tutti gli oggetti della pagina Web creati nel corpo HTML sono disegnati attraverso il CSS. Il colore è una proprietà di base di CSS che viene applicata a tutti gli oggetti sul testo o anche sull'immagine.

Il foglio in stile CSS ha una funzione integrata che viene utilizzata per invertire i colori al contenuto del corpo HTML. Questo articolo conterrà una spiegazione riguardante l'inversione del colore del testo e anche l'immagine. La sintassi di base della funzione Invert è:

Invertire (importo applicato all'oggetto)

Questo singolo parametro contiene la quantità in percentuale a cui dovrebbe essere eseguita l'estensione dell'inversione dei colori. Il valore di questa funzione per l'immagine originale è lo 0%. Considerando che, se il valore della funzione invertito è al 100%, i colori vengono invertiti. Il valore del 50% mostra che l'immagine sarà di un colore grigio completamente solido perché tutti i pixel sono coperti di colore grigio.

Esempio 1: CSS inverte il colore del testo:

In questo esempio, vedremo come vengono modificati i colori del testo della pagina web utilizzando la funzione invertita. Prima di spostarci verso i codici, vorremmo visualizzare l'immagine originale della pagina Web su cui applicheremo l'effetto della funzione di colore invertito.

Questa pagina Web è semplicemente formata utilizzando i tag HTML e CSS. Intestazioni

E

, E

sono i tag del corpo HTML che sono responsabili di questi testi visualizzati nella pagina web. Mentre il CSS contiene il colore del carattere applicato a loro perché il colore del carattere predefinito è sempre nero in HTML.

Ora, considera un semplice codice HTML che viene utilizzato per progettare questa pagina. All'interno della porzione del corpo, un'intestazione

è dichiarato. Per applicare la funzione Invert sul testo, abbiamo usato CSS interno per lo stile. Poiché abbiamo familiarità con tutti i tipi di CSS, CSS interno viene dichiarato utilizzando il tag di stile, all'interno della testa del codice HTML. Questo stile viene eseguito usando ID e classi nel tag di stile. Queste classi e ID sono accessibili attraverso i loro nomi scritti all'interno dei tag di contenuto di HTML.

Ad esempio, all'interno dell'intestazione, abbiamo usato una parola chiave di classe con il nome della classe "invert_effect". Questa classe è dichiarata all'interno della porzione di stile.

1

.. .

Effetto simile è applicato su

e il paragrafo.

Successivamente, chiudi i tag del corpo HTML. Il tag di stile conterrà lo stile per entrambe le intestazioni. Questo effetto è il colore del carattere. Entrambe le intestazioni hanno colori diversi.

1 2 3 4 5

H1 Colore viola;

Allo stesso modo, il paragrafo è anche disegnato aggiungendo il colore del carattere ad esso. Quindi, abbiamo applicato un effetto al corpo per visualizzare tutti i contenuti di HTML al centro della pagina web. L'allineamento è dato a tutto il contenuto della porzione del corpo HTML.

Successivamente, l'effetto principale che è la funzione di inverte del colore () è definito come una classe.

1 2 3 4

.invert_effect Filtro: invertito (100%);

La classe è dichiarata con una fermata completa all'inizio che è l'identità della classe.

Usando questa funzione, tutti i colori del testo di intestazioni e paragrafi saranno modificati. Tutti i colori originali sono filtrati. Vengono mostrati i colori che vengono lasciati alle spalle. Abbiamo usato la percentuale invertita al 100%. O tutti i colori verranno invertiti accuratamente.

Chiudi il tag di stile. Quindi, salva il file di testo con il .Estensione HTML per aprire il file sia con il blocco note nel formato di testo che nel browser sotto forma della pagina web.

Quando la pagina Web viene caricata nel browser, vedrai che i colori dell'intero corpo vengono modificati. Ciò è dovuto alla funzione invertita che viene applicata al testo.

Esempio 2: CSS inverte il colore dell'immagine:

Dopo aver applicato l'effetto colore invertito sul testo, applicheremo questo filtro all'immagine. Nell'esempio precedente, c'erano pochissimi colori usati nel contenuto di testo HTML. Ma ora abbiamo usato un'immagine con una varietà di colori per applicare la funzione di colore invertito su quell'immagine. Facciamo un'immagine JPEG campione con fiori multicolori. JPEG è un formato di immagine che contiene uno sfondo con esso. L'immagine seguente ha uno sfondo bianco.

Questa immagine verrà utilizzata nel codice per applicare la funzione Invert su di essa. Innanzitutto, considera la porzione del corpo HTML. All'interno del tag del corpo, abbiamo usato la stessa intestazione con un'immagine. Un'immagine viene utilizzata nella pagina web fornendo la fonte dell'immagine. La posizione è anche il PC o Internet. Abbiamo usato il file scaricato.

1

Il tag immagine contiene il nome della classe per applicare l'effetto invertito su di essa. Muovendosi verso la sezione CSS, lo stile per l'intestazione rimane lo stesso. L'immagine è disegnata fornendo le dimensioni proporzionali dell'immagine tra cui l'altezza e la larghezza dell'immagine. La classe invert_effect avrà anche lo stesso valore filtrato da applicare all'immagine.

Salva il codice ed esegui il file HTML sul browser. Vedrai che tutti i colori originariamente presenti sui fiori sono cambiati. Il colore di sfondo è anche influenzato dalla funzione Invert.

In questo modo, il filtro della funzione Invert viene applicato a tutti i colori in testo normale o anche sulle immagini.

Informazioni aggiuntive:

Il colore grigio è responsabile dell'inversione dei colori. Quindi, per un esperimento, abbiamo diminuito il valore invertito al 38%, per vedere quali saranno i risultati.

1 2 3 4

.invert_effect Filtro: invertito (38%);

L'output ha l'immagine originale con uno strato poco chiaro di colore grigiastro che ha reso l'immagine tra la condizione originale e invertita.

Conclusione:

Il colore invertito CSS è una funzione che dipende dai colori dell'oggetto HTML. Per dare al tuo oggetto una gamma unica di colori, utilizziamo questa funzione. All'inizio del tutorial, abbiamo spiegato quale sia questa funzione dando la sua sintassi e parametro. Quindi, abbiamo usato due esempi di base per elaborare il corretto funzionamento della funzione invertita in CSS. Questa proprietà è correlata al filtro dei colori, in cui tutti i colori vengono modificati fornendo l'importo specificato. Abbiamo applicato l'effetto filtro sia sul testo che sull'immagine per fornire all'utente il modo più semplice di utilizzare la funzione invertita di CSS.