CSS Academy · Lezione

Colore e immagine di sfondo

Applicate colori e immagini di sfondo utilizzando le proprietà background-color e background-image.

Lezione 2 di 413 passaggi

Colore e immagine di sfondo è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

background-color

La proprietà background-color imposta un colore uniforme dietro un elemento. Accetta qualsiasi valore di colore CSS ed è visibile attraverso le aree trasparenti delle immagini di sfondo.

<div class="hero">Hero section</div>

background-image

background-image imposta una o più immagini come sfondo dell'elemento. Le immagini vengono sovrapposte a background-color.

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

background-size

background-size controlla le dimensioni dell'immagine. Valori importanti:

cover — riempie l'area e ritaglia l'immagine se necessario
contain — adatta interamente l'immagine, ma può lasciare degli spazi vuoti
100% 100% — allunga l'immagine per riempire esattamente l'area

<div class="hero"></div>

background-position

background-position imposta la posizione dell'immagine. Utilizzi parole chiave oppure valori percentuali o di lunghezza.

<div class="hero"></div>

background-repeat

Per impostazione predefinita, le immagini vengono ripetute a mosaico. Controlli la ripetizione con background-repeat:

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

background-attachment determina se un'immagine scorre insieme alla pagina. fixed crea un effetto simile alla parallasse; scroll è il valore predefinito.

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

Sfondi multipli

CSS supporta più livelli di sfondo separati da virgole. Il primo livello elencato viene visualizzato in primo piano.

<div class="card">Overlay + photo layers</div>

Forma abbreviata di background

La forma abbreviata background combina tutte le proprietà dello sfondo in un'unica dichiarazione. Per le dimensioni l'ordine è importante: le scriva dopo la posizione, separandole con /.

<div class="hero"></div>

Ritaglio e origine dello sfondo

background-clip controlla l'area in cui viene disegnato lo sfondo rispetto al modello a riquadri. background-origin imposta il punto di riferimento per il posizionamento.

<div class="card">Clip &amp; Origin</div>

Ritaglio dello sfondo sul testo

Utilizzi background-clip: text con un colore del testo trasparente per ritagliare un'immagine o un gradiente di sfondo secondo la forma del testo.

<h1>Gradient Text</h1>

object-fit per <img> rispetto a background-image

Per i tag <img>, utilizzi object-fit: cover e object-position invece di background-image. In questo modo le immagini rimangono nel DOM, a vantaggio dell'accessibilità e della SEO.

<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

Verifica rapida

Quale valore di background-size riempie l'area e ritaglia l'immagine invece di lasciare spazi vuoti?

Rispondi nella lezione interattiva

Riepilogo

Utilizzi background-color come riserva sotto le immagini. background-size: cover è la scelta ideale per le immagini hero a tutta larghezza. Più livelli di sfondo offrono un grande controllo sulla composizione. La forma abbreviata combina tutte le proprietà dello sfondo in modo conciso.

Gratis per iniziare

Impara CSS con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 40
Lezioni: 159

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Colore e immagine di sfondo» è gratuita?

Sì — il testo completo di «Colore e immagine di sfondo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Colore e immagine di sfondo»?

Applicate colori e immagini di sfondo utilizzando le proprietà background-color e background-image. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Colore e immagine di sfondo»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy