1.1 Proprietà background-color
La proprietà background-color imposta il colore di sfondo per un elemento. Permette di definire il riempimento colorato dello sfondo, fornendo una separazione visiva del contenuto e migliorando la leggibilità del testo e di altri elementi.
Valori:
- Nomi dei colori: puoi usare nomi di colori predefiniti, come
red,blue,green - Valori esadecimali: ad esempio,
#ff0000,#00ff00,#0000ff - RGB: ad esempio,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: ad esempio,
rgba(255, 0, 0, 0.5)(rosso trasparente) - HSL: ad esempio,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: ad esempio,
hsla(0, 100%, 50%, 0.5)(rosso trasparente).
Esempio di utilizzo:
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<body>
<div class="color-red">Questo elemento ha uno sfondo rosso.</div>
<div class="color-hex">Questo elemento ha uno sfondo di colore esadecimale.</div>
<div class="color-rgba">Questo elemento ha uno sfondo verde trasparente.</div>
</body>
Spiegazione del codice:
background-color: red;: imposta uno sfondo rosso per l'elementobackground-color: #3498db;: imposta il colore di sfondo usando un valore esadecimalebackground-color: rgba(46, 204, 113, 0.7);: imposta uno sfondo verde trasparente usando RGBA
1.2 Proprietà background-image
La proprietà background-image imposta un'immagine di sfondo per un elemento. Permette di utilizzare immagini per creare sfondi visivamente accattivanti, migliorando il design e la percezione della pagina web.
Come valore, bisogna passare l'URL dell'immagine — specificare il percorso dell'immagine che verrà utilizzata come sfondo. Ad esempio, url('image.jpg').
Esempio di utilizzo:
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<body>
<div class="background-url">Questo elemento ha un'immagine di sfondo.</div>
</body>
Spiegazione del codice:
background-image: url('https://via.placeholder.com/150');: imposta un'immagine come sfondo per l'elemento. In questo caso, si utilizza un URL dell'immagine
Vantaggi di utilizzare background-image:
- Attrattiva visiva: l'utilizzo di immagini di sfondo consente di creare pagine web più visivamente accattivanti e interessanti.
- Contesto: le immagini di sfondo possono fornire contesto aggiuntivo o informazioni, migliorando la percezione visiva del contenuto della pagina.
- Branding: le immagini di sfondo possono far parte del branding, aiutando a mantenere uno stile coerente e riconoscibile del sito.
Consigli per l'uso delle immagini di sfondo:
- Ottimizzazione delle immagini: per migliorare le prestazioni della pagina, è importante ottimizzare le immagini riducendo la loro dimensione senza una significativa perdita di qualità
- Supporto cross-browser: assicurati che le immagini utilizzate siano visualizzate correttamente su tutti i browser di destinazione
- Testo alternativo: per le immagini che hanno un'importanza significativa, è necessario prevedere modi alternativi per trasmettere informazioni, come le descrizioni testuali, per utenti con limitazioni
1.3 Utilizzo combinato di background-color e background-image
Le proprietà background-color e background-image possono essere utilizzate insieme per creare sfondi complessi e accattivanti. Ad esempio, puoi impostare un colore di sfondo che sarà visibile nel caso in cui l'immagine di sfondo non venga caricata, o utilizzare uno sfondo colorato in combinazione con un'immagine trasparente.
Esempio di utilizzo:
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
<body>
<div class="combined-background">
Questo elemento ha uno sfondo combinato con immagine e colore.
</div>
</body>
Spiegazione del codice:
background-color: #3498db;: imposta il colore di sfondobackground-image: url('https://via.placeholder.com/150');: imposta l'immagine di sfondowidth: 300px;height: 300px;: imposta le dimensioni dell'elementocolor: white;: imposta il colore del testo per una migliore leggibilità sullo sfondodisplay: flex;align-items: center;justify-content: center;text-align: center;: centra il testo all'interno dell'elementoborder: 1px solid #000;: aggiunge un bordo intorno all'elemento per evidenziarlo visivamente
GO TO FULL VERSION