Una tecnica di overlay in CSS è un modo per trasporre il testo sulle immagini. Il CSS "immagine di sfondo"E CSS"sfondo"Le proprietà vengono utilizzate per ottenere questo effetto di sovrapposizione. Lo scopo di questo articolo è esplorare come utilizzare CSS per impostare un'immagine di sovrapposizione con il colore.

I risultati di questo articolo sono:

• • Cos'è la proprietà di immagine di background in CSS?
  • Cos'è la proprietà di fondo in CSS?
  • Come impostare l'immagine di sovrapposizione con il colore?

Cominciamo!

Proprietà dell'immagine di background

Per aggiungere un'immagine come sfondo di eventuali elementi HTML, "immagine di sfondo"La proprietà può essere utilizzata.

Sintassi

La sintassi della proprietà dell'immagine di fondo è:

Imaga di sfondo: immagine url ();

Specificare il nome dell'immagine o il suo percorso completo all'interno dell'URL ().

Cos'è la proprietà di fondo in CSS?

È una proprietà stenorta utilizzata per assegnare valori diversi all'immagine, come colore, dimensioni, posizione e così via.

Sintassi

La sintassi della proprietà di sfondo è:

Sfondo: colore | posizione | misurare ;

• • colore: Viene utilizzato per assegnare il colore di sfondo.
  • posizione: Viene utilizzato per impostare la posizione di sfondo.
  • misurare: Viene utilizzato per specificare la dimensione dello sfondo.

Ecco un esempio per spiegare il punto.

Esempio: come impostare l'immagine di sovrapposizione con il colore?

In questo esempio per primo, creeremo un div, chiamato "overlay"E all'interno del Div, abbiamo aggiunto una consegna con

etichetta:

Overlay di immagine

Ora aggiungeremo un'immagine di sfondo con l'aiuto del CSS. COME "url ()", Abbiamo dato il percorso dell'immagine e assegnato la larghezza"350px, altezza "250px", E posizione"assoluto"Dell'immagine:

.Immagine
Sfondo: URL ("Immagine.jpg ") no-ripeat;
larghezza: 350px;
Altezza: 250px;
Posizione: assoluto;

Questo darà il seguente output:

Ora, muoviamo un ulteriore passo avanti per applicare l'effetto di sovrapposizione ad esso:

.overlay
Sfondo: RGBA (233, 140, 0, 0.7);
margine-top: 10px;
Margin-Left: 55px;
larghezza: 200px;
Font-size: 25px;
Colore: RGB (252, 80, 0);
Posizione: assoluto;

Qui abbiamo utilizzato diverse proprietà CSS per servire diverse funzionalità:

• • sfondo: Abbiamo assegnato un colore di overlay usando la proprietà di sfondo.
  • margine: Per specificare la posizione dell'overlay, utilizzare la proprietà del margine.
  • larghezza: Questo parametro specifica la dimensione dell'overlay visualizzata sull'immagine di sfondo.
  • dimensione del font: Specifica la dimensione del carattere.
  • colore: Imposta il colore del testo.
  • posizione: Definisce dove apparirà il testo.

Dopo l'implementazione dei punti sopra menzionati, salva il codice file HTML e CSS e controlla il risultato:

Abbiamo offerto il metodo per impostare un'immagine di overlay con colore in CSS.

Conclusione

L'effetto di sovrapposizione può essere ottenuto utilizzando CSS "immagine di sfondo"E CSS"sfondo" proprietà. Può essere fatto assegnando un'immagine alla proprietà dell'immagine di sfondo e impostando il colore nella proprietà di sfondo. Inoltre, è una tecnica per combinare più di un elemento in un singolo contenitore. Questo post ha dimostrato come impostare immagini di sovrapposizione con colore in CSS usando esempi.