Come utilizzare la transizione CSS per sfondo di dissolvenza opacità

CSS fornisce molte proprietà benefiche agli elementi HTML. Queste proprietà aiutano gli utenti a regolare gli elementi HTML, come dimensioni, colore, opacità, transizione e molti altri. Più specificamente, il "transizione"La proprietà consente agli sviluppatori di impostare il livello di trasparenza e aggiungere effetti agli elementi HTML. Questa particolare funzione può rendere la pagina web più divertente e coinvolgente.

Questo post ti istruirà sull'uso della transizione CSS per sfondi di dissolvenza opacità.

Come utilizzare la transizione CSS per sfondo di dissolvenza opacità?

Il CSS "transizione"La proprietà viene utilizzata per modificare i valori della proprietà entro una durata specificata gradualmente. Mentre il CSS “opacità"La proprietà regola il livello di trasparenza degli elementi.

Per utilizzare la transizione CSS per sfondo di dissolvenza opacità, seguire i passaggi forniti.

Passaggio 1: creare una scheda in HTML

Prima di tutto:

• Aggiungere un ""Elemento e assegnarlo una classe"carta".
• Quindi, includi il "

  "Tag per impostare un'intestazione e il"

  "Elemento per specificare il contenuto di testo.

• Dopodiché, aggiungi un ""Tag per l'immagine. IL "src"L'attributo specifica l'URL dell'immagine e il"classe"L'attributo è impostato come"Fade-img"Per accedere all'immagine in CSS per lo styling.

Html

Sig. John

Autore tecnico

Passaggio 2: modella la carta

IL ".carta"La classe è disegnata con le proprietà sotto l'elenco:

.carta
larghezza: 300px;
Altezza: 300px;
bordo: 1px solido RGB (232, 229, 232);
Margine: auto;
imbottitura: 15px;
raggio di confine: 10px;
Posizione: relativo;

Qui:

• "larghezza"Determina l'ampiezza dell'elemento.
• "altezza"Determina l'altezza dell'elemento.
• "confine"Aggiunge un bordo attorno all'elemento.
• "margine"Genera spazio attorno all'elemento.
• "imbottitura"Produce spazio all'interno del bordo dell'elemento.
• "raggio di confine"Round i bordi dell'elemento.
• "posizioneLa proprietà "è impostata su"parente", Che viene utilizzato per l'impostazione dell'elemento rispetto alla sua posizione originale.

Produzione

Passaggio 3: regola l'immagine

IL ".Fade-img"La classe è utilizzata in CSS per modellare l'immagine. La dimensione e l'opacità dell'immagine saranno regolate in questa classe:

.Fade-img
Posizione: assoluto;
a sinistra: 0;
Top: 0;
Altezza: 100%;
larghezza: 100%;
Object-Fit: copertura;
opacità: 0.2;
Transizione: opacità .25s Facii-in-Out;
Cursore: puntatore;

Le seguenti proprietà descritte vengono aggiunte al "Fade-img" classe:

• "posizione"Con il valore"assoluto"Imposta la posizione dell'elemento corrispondente al suo elemento quasi posizionato.
• IL "superiore" E "Sinistra"Sono le proprietà offset che regolano l'elemento dall'alto, a sinistra, a destra e in basso.
• IL "larghezza" E "altezza"Le proprietà vengono utilizzate per specificare l'area dell'elemento.
• "Object-Fit"Proprietà con il valore"copertina"Fa riempire l'immagine il contenitore.
• "opacità"Il valore designa il livello di trasparenza.
• "transizione"Proprietà con il valore"opacità .25s facilmente"Definisce la proprietà dell'opacità che si muove gradualmente nella durata di"25s".
• "cursore"La proprietà definisce lo stile del cursore.

Passaggio 4: Aggiungi opacità su Hover

IL ".Fade-IMG: Hover"Viene utilizzato per applicare lo stile all'immagine quando il dispositivo di puntamento si libra su di esso. Inoltre, ": Hover"È una classe pseudo CSS che viene utilizzata per aggiungere stili su Hover:

.Fade-img: Hover
opacità: 0.9;

Qui, il livello di opacità è adeguato a "0.9".

Produzione

Si può osservare che abbiamo applicato con successo la proprietà di transizione CSS per sbiadire lo sfondo.

Conclusione

Per aggiungere una transizione per lo sfondo di dissolvenza opacità, prima, imposta il “" la zona. Quindi regola le sue dimensioni e opaci utilizzando il CSS "larghezza","altezza", E "opacità" proprietà. Successivamente, fornire il "transizione"Proprietà ad essa, che determinerà come i valori delle proprietà cambiano gradualmente per una durata specificata. Poi il "opacità"È nuovamente impostato sul mouse mouse usando il": Hover"Classe pseudo. Questo post ha spiegato la procedura su come utilizzare la proprietà di transizione per lo sfondo di dissolvenza opacità in CSS.