CSS - Gradiente di opacità CSS3

Produzione

Passaggio 3: modella il contenitore di div

Accedi al contenitore Div utilizzando il nome della classe con il selettore di classe come "#contenuto principale":

#contenuto principale
Background-color: Lightgreen;
Margine: 20px 80px;
Bordo: 3px punteggiato blu;

Quindi, applica le proprietà CSS elencate di seguito:

• "colore di sfondo"È utilizzato per impostare il colore sul retro dell'elemento.
• "margine"Assegna lo spazio sul lato esterno del confine definito.
• "confine"La proprietà viene utilizzata per determinare un bordo attorno all'elemento definito.

Passaggio 4: paragrafo di stile

Ora, modella il paragrafo accedendolo con il nome di classe ".paragrafo 1":

.paragrafo 1
colore blu;
Overflow: nascosto;
Posizione: relativo;
mix-blend-mode: duro;
Font-size: 30px;

Qui:

• "colore"La proprietà assegna un colore al testo all'interno del paragrafo.
• "overflow"Viene utilizzato per mostrare i risultati quando il contenuto si riversa da una casella di elementi. Questa proprietà determina se afferrare il testo o aggiungere le barre di scorrimento quando il contenuto di tale elemento è lungo da impostare in una particolare area.
• "posizione"Imposta la posizione dell'elemento in un documento.
• "miscelare la miscela in modalità"La proprietà CSS viene utilizzata per l'impostazione del contenuto di un elemento miscelato con il contenuto radice e lo sfondo dell'elemento.
• "dimensione del font"Viene utilizzato per definire un carattere particolare per il testo nel paragrafo.

Passaggio 5: Impostare il "gradiente lineare" sul paragrafo

Utilizzare il ".paragrafo 1"Per accedere alla classe": dopo ":

.paragrafo-1: dopo
Posizione: assoluto;
Top: 0px;
Sfondo: gradiente lineare (trasparente, grigio);
A sinistra: 0px;
contenuto: "";
larghezza: 100%;
Altezza: 100%;
Event puntatore: nessuno;

Secondo lo snippet di codice dato:

• "posizione"È impostato come assoluto in questo frammento.
• "Sinistra" E "superiore"Le proprietà vengono utilizzate per l'impostazione della posizione dell'elemento ai lati a sinistra e in alto.
• "sfondo"Proprietà impostata come" gradiente lineare "crea uno sfondo costituito da una transizione in corso tra colori diversi con una linea retta.
• "contenuto"La proprietà è utilizzata per l'impostazione del contenuto.
• "larghezza"Assegna la larghezza dell'elemento.
• "altezza"La proprietà viene utilizzata per impostare l'altezza dell'elemento definito.
• "puntatore-evento"Specifica le condizioni in cui un determinato elemento visivo è diventato il bersaglio dell'evento

Produzione

Si può notare che il gradiente di opacità CSS è stato applicato con successo.

Conclusione

Per impostare il gradiente di opacità, prima, aggiungi il testo nel paragrafo usando "

"Tag. Quindi, accedi al paragrafo e applica il "sfondo"Proprietà CSS e impostare il valore di questa proprietà come"gradiente lineare". Crea uno sfondo costituito da una transizione progressiva tra due o più colori lungo una linea retta. Questo articolo ha spiegato il gradiente di opacità CSS.