4.1 Principi fondamentali
CSS ti permette di usare più immagini di sfondo in un elemento, aprendo un mondo di possibilità per creare effetti visivi complessi e interessanti. Con la proprietà background-image e le proprietà correlate, puoi impostare diversi strati di immagini di sfondo, controllandone l'ordine, la posizione e altre caratteristiche.
Sintassi
Per specificare più immagini di sfondo, si utilizza una sintassi in cui le immagini vengono elencate separate da virgole:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Proprietà per configurare ogni livello
Oltre a background-image, ci sono altre proprietà per configurare ogni strato di immagine di sfondo che supportano anch'esse valori multipli separati da virgole:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Ordine dei livelli
Le immagini sono disposte in livelli nell'ordine in cui sono elencate, dove la prima immagine è la più vicina all'utente e l'ultima è la più vicina allo sfondo dell'elemento.
4.2 Sovrapposizione delle immagini
Semplice sovrapposizione delle immagini.
Esempio d'uso:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg">Sfondo Multilivello</div>
</body>
Spiegazione del codice:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: imposta due immagini di sfondobackground-position: center, top left;: centra la prima immagine e posiziona la seconda immagine in alto a sinistrabackground-repeat: no-repeat, no-repeat;: disabilita la ripetizione per entrambe le immagini
4.3 Uso di immagini multiple
Uso di più immagini di sfondo con dimensioni diverse.
Esempio d'uso:
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes">Sfondo Multilivello con Dimensioni</div>
</body>
Spiegazione del codice:
background-size: 50% 50%, 30% 30%;: scala la prima immagine fino al 50% della larghezza e dell'altezza dell'elemento, e la seconda immagine fino al 30% della larghezza e dell'altezza dell'elemento
4.4 Immagini trasparenti
Sovrapposizione di immagini con trasparenza.
Esempio d'uso:
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<body>
<div class="multi-bg-opacity">Sfondo Multilivello con Trasparenza</div>
</body>
Spiegazione del codice:
background-size: cover, 50%;: scala la prima immagine per coprire tutto l'elemento, e la seconda immagine fino al 50% della dimensione dell'elemento::before: un pseudo-elemento che aggiunge un livello nero semi-trasparente sopra le immagini di sfondo
4.5 Ritaglio dello sfondo
Uso di altre proprietà con più immagini di sfondo.
background-origin e background-clip
Queste proprietà controllano l'area in cui viene visualizzata l'immagine di sfondo e l'area di ritaglio dello sfondo.
Esempio d'uso:
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
<body>
<div class="multi-bg-origin-clip">Sfondo Multilivello con background-origin e background-clip</div>
</body>
Spiegazione del codice:
background-origin: padding-box, content-box;: la prima immagine inizia dal bordo interno del padding, la seconda immagine dal contenuto dell'elementobackground-clip: border-box, padding-box;: la prima immagine viene ritagliata al bordo esterno del bordo, la seconda immagine al bordo interno del padding
GO TO FULL VERSION