Una delle novità di CSS3 è l'aggiunta del supporto a background multipli, ovvero la possibilità di specificare più di un'immagine di sfondo, posizionando ciascuna risorsa su un livello diverso (layer).
L'esempio seguente mostra come costruire una scena complessa usando singole immagini (un aeroplano, una nuvola e un sole) opportunamente posizione come sfondo di un contenitore:
div.sky { width: 500pt; height: 250pt; border: 1px solid #000; background: url(airplane.png) 230pt 100pt no-repeat, url(cloud.png) 280pt 65pt no-repeat, url(cloud.png) 330pt 25pt no-repeat, url(cloud.png) 80pt 25pt no-repeat, url(sun.png) 20pt 15pt no-repeat, #0667b5; }
Nell'esempio le immagini si sovrappongono parzialmente per cui l'ordine di dichiarazione degli sfondi risulta fondamentale: al livello più alto (in primo piano) troviamo l'aeroplano, in quanto è la prima immagine dichiarata, e poi via via tutti gli altri.
Ogni immagine di sfondo può inoltre essere ridimensionata usando la proprietà background-size per indicare le dimensioni delle singole immagini dobbiamo semplicemente inserire le coppie di valori (larghezza e altezza) separate da virgola, rispettando l'ordine usato nella definizione della proprietà background-image.
Impostando background-size: cover; l'immagine verrà ridimensionata (mantenendo inalterate le proporzioni) in modo che il valore più piccolo tra larghezza e altezza sia pari alla dimensione del contenitore. Con background-size: contain; l'immagine verrà invece ridimensionata (sempre rispettandone le proporzioni), in modo che il valore più grande tra larghezza e altezza sia pari alla dimensione del contenitore.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Le novità di Angular: i miglioramenti alla CLI
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Usare il versioning con i controller di ASP.NET Core Web API
Eseguire attività pianificate con Azure Container Jobs
Utilizzare gli snapshot con Azure File shares
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
Utilizzare i primary constructor di C# per inizializzare le proprietà
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Aggiungere interattività lato server in Blazor 8
Utilizzare la libreria Benchmark.NET per misurare le performance
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)