Questa guida allo studio dimostrerà come utilizzare le immagini di sfondo con i CSS. Quindi, cominciamo!
Come utilizzare più immagini di sfondo con i CSS?
Il CSS” sfondo La proprietà ” è una proprietà abbreviata che contiene le proprietà background, background-attachment, clip, image, repeat, origin, size e position. La proprietà background può essere utilizzata per specificare gli URL di più immagini. Tali immagini vengono quindi posizionate e impostate di conseguenza.
Facciamo un esempio in cui un elemento div contiene una sola 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 utilizza più immagini, quindi l'abbiamo chiamato ' multiple-immagini ”. Tuttavia, puoi specificare il nome della classe secondo le tue preferenze.
HTML
< div classe = 'logo' >< / div >< div classe = 'immagini multiple' >< / div >
Nella prossima sezione, regoleremo le immagini usando la proprietà CSS background.
Stile “logo” div
.logo {larghezza : 100% ;
altezza : 50 pixel ;
imbottitura : 5px ;
margine : 5px ;
dimensione dello sfondo : 100 pixel ;
sfondo-ripetizione : senza ripetizione ;
immagine 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 impostare la larghezza dell'elemento su ' 100% ”.
- “ altezza La proprietà ” viene utilizzata per impostare l'altezza dell'elemento su “ 50 pixel ”.
- “ imbottitura La proprietà ” viene utilizzata per impostare la proprietà “ 5px ” spazio attorno al contenuto specificato dell'elemento.
- “ margine La proprietà ” viene utilizzata per impostare il “ 5px ” spazio attorno all'elemento.
- “ dimensione dello sfondo La proprietà 'imposta la dimensione dell'immagine di sfondo dell'elemento come' 100 pixel ”.
- “ sfondo-ripetizione ” con il valore “ senza ripetizione ” visualizza lo sfondo solo una volta.
- “ immagine di sfondo La proprietà ” viene utilizzata per specificare l'URL dell'immagine.
Stile “immagini multiple” div
.immagini-multiple {larghezza : 90% ;
altezza : 45 vh ;
margine : 1 pixel auto ;
imbottitura : 20px ;
dimensione dello sfondo : 150 pixel ;
colore di sfondo : rgb ( 157 , 154 , 151 ) ;
immagine di sfondo : URL ( immagini/ufficio.png ) , URL ( immagini/html.png ) , URL ( immagini/laptop.png ) ;
sfondo-ripetizione : senza ripetizione , senza ripetizione , senza ripetizione ;
posizione di sfondo : Sinistra , centro , Giusto ;
}
Ora, modella l'altro contenitore come segue:
- “ colore di sfondo La proprietà ” specifica il colore dello sfondo dell'elemento.
- “ immagine di sfondo ” specifica più URL immagine.
- “ sfondo-ripetizione ” imposta i valori per le immagini in una sequenza delle immagini specificate nella proprietà background-image. Entrambe le immagini sono impostate come non ripetute significa che verranno visualizzate sul browser solo una volta.
- “ posizione di sfondo ” regola la posizione dell'immagine nella sequenza delle immagini specificate dalla proprietà background-image. La prima immagine verrà posizionata sul lato sinistro, la seconda al centro e la terza verrà posizionata sul lato destro.
Fornendo il codice fornito sopra, il risultato nel browser sarà simile a questo:
In questo modo, possiamo regolare la posizione di più immagini con i 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 background-position, background-repeat, background-size e altro. Questo manuale ha dimostrato l'uso di più immagini di sfondo con esempi CSS.