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
Utilizzare Live metrics con le Azure Functions
Use Firebase in Progressive Web Apps
Creare automaticamente una relazione padre-figlio tra work item in Azure DevOps
Utilizzare l'optional chaining operator di TypeScript per semplificare il controllo di oggetti null o undefined
Realizzare animazioni con Blazor Server
Sviluppare applicazioni con supporto al doppio schermo con Xamarin
Attesa e validazione manuale nelle pipeline YAML di Azure DevOps
Utilizzare una direttiva di Angular per limitare i caratteri inseribili in una textbox
Utilizzare la modalità serverless con Azure Cosmos DB
Usare Azure Active Directory con SQL Database
PWAConf 2020
Esecuzione condizionale dei template nelle pipeline YAML di Azure DevOps
I più letti di oggi
- Creare un web server locale con LiveReload
- Operatori di confronto in JavaScript: == e ===
- Microsoft WebCamp - Roma, Milano
- Dev Night #2: Serverless - Milano
- Disponibile la release finale di Moonlight 1.0
- Lancio ufficiale di Moonlight 1.0
- Disponibile il Silverlight Toolkit March 2009 Release
- MonoTouch in versione 1.0: C# per iPhone diventa realtà