Come utilizzare più immagini di sfondo con CSS

Durante lo sviluppo di qualsiasi applicazione, lo sviluppatore deve mantenere l'interazione dell'applicazione. Esistono diverse funzionalità che possono aiutare a attirare l'attenzione dell'utente, come colori, immagini, GIF e altro ancora. Per aggiungere un'immagine al sito Web, HTML ""Il tag può essere utilizzato. Mentre per aggiungere più immagini con CSS, il "immagine di sfondo"La proprietà viene utilizzata con gli URL delle immagini.

Questa guida allo studio dimostrerà come utilizzare le immagini di sfondo con CSS. Quindi, iniziamo!

Come utilizzare più immagini di sfondo con CSS?

Il CSS "sfondo"La proprietà è una proprietà stenografica che contiene proprietà di sfondo, attacco di sfondo, clip, immagine, ripetizione, origine, dimensioni e posizioni. La proprietà di sfondo può essere utilizzata per specificare gli URL di più immagini. Quelle immagini vengono quindi posizionate e impostate di conseguenza.

Facciamo un esempio in cui un elemento div contiene solo un'immagine come logo della pagina web mentre il secondo contiene tre immagini.

Esempio: aggiunta di più immagini di sfondo con CSS

In HTML, aggiungi un elemento div per il logo e specifica il nome della classe. Ad esempio, l'abbiamo chiamato "logo". Il secondo div usa più immagini, quindi l'abbiamo chiamata "Immagini multiple". Tuttavia, puoi specificare il nome della classe secondo le tue preferenze.

Html

Nella sezione successiva, regoleremo le immagini utilizzando la proprietà di sfondo CSS.

Stile "logo" di stile

.logo
larghezza: 100%;
Altezza: 50px;
imbottitura: 5px;
Margine: 5px;
Size di sfondo: 100px;
Ripeat background: no-ripetizione;
Immagina di sfondo: URL (immagini/Linux-logo.png);

L'elemento div con la classe "logo"Viene applicato con le seguenti proprietà:

• "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento su"100%".
• "altezza"La proprietà viene utilizzata per impostare l'altezza dell'elemento su"50px".
• "imbottituraLa proprietà "viene utilizzata per l'impostazione del"5px"Spazio attorno al contenuto specificato dell'elemento.
• "margineLa proprietà "viene utilizzata per l'impostazione del"5px"Spazio attorno all'elemento.
• "Size di sfondo"La proprietà imposta la dimensione dell'immagine di sfondo dell'elemento come"100px".
• "Ripeat di sfondo"Con il valore"no-ripeat"Visualizza lo sfondo solo una volta.
• "immagine di sfondo"La proprietà viene utilizzata per specificare l'URL dell'immagine.

Stile "Multiple-Images" Div

.Immagini multiple
larghezza: 90%;
Altezza: 45VH;
Margine: 1px Auto;
imbottitura: 20px;
Size di sfondo: 150px;
Background-color: RGB (157, 154, 151);
Immagina di sfondo: URL (immagini/ufficio.PNG), URL (immagini/html.PNG), URL (immagini/laptop.png);
Ripeat di sfondo: no-ripeat, no-ripetizione, senza ripetizione;
Posizione di background: sinistra, centro, a destra;

Ora, modella l'altro contenitore come segue:

• "colore di sfondo"La proprietà specifica il colore dello sfondo dell'elemento.
• "immagine di sfondo"La proprietà specifica più URL di immagine.
• "Ripeat di sfondo"La proprietà imposta i valori per le immagini in una sequenza delle immagini specificate nella proprietà dell'immagine di sfondo. Entrambe le immagini sono impostate come non ripeat significa che mostreranno sul browser solo una volta.
• "posizione in background"Regola la posizione dell'immagine nella sequenza delle immagini specificate dalla proprietà dell'immagine di sfondo. La prima immagine verrà impostata sul lato sinistro, la seconda al centro e la terza verrà posizionata sul lato destro.

Fornendo il codice sopra fornito, il risultato nel browser sembrerà così:

In questo modo, possiamo regolare la posizione di più immagini con CSS.

Conclusione

Per rendere l'applicazione divertente e interattiva, gli sviluppatori utilizzano immagini e colori diversi. Possiamo impostare più immagini con proprietà di sfondo CSS, come posizione di sfondo, ripeti di sfondo, dimensioni di sfondo e altro ancora. Questo manuale ha dimostrato l'uso di più immagini di sfondo con esempi CSS.