The CSS Podcast - 053: Background
Dietro ogni riquadro CSS è presente uno strato specializzato chiamato livello di sfondo. Il CSS offre diversi modi per apportare modifiche significative, tra cui la possibilità di avere più sfondi.
I livelli di sfondo sono più lontani dall'utente e vengono visualizzati dietro i contenuti di una casella a partire dalla relativa regione padding-box
. In questo modo, il livello di sfondo non si sovrappone ai bordi.
Colore sfondo
Uno degli effetti più semplici che puoi applicare a un livello di sfondo è l'impostazione del colore. Il valore iniziale di background-color
è transparent
, che consente la visualizzazione dei contenuti di un elemento principale. Un colore valido impostato su un livello di sfondo si trova dietro gli altri elementi dipinti su quell'elemento.
Immagini di sfondo
Sopra il livello background-color
, puoi aggiungere un'immagine di sfondo utilizzando la proprietà background-image
. Un background-image
accetta quanto segue:
- Un URL immagine o un URI dati utilizzando la funzione CSS
url
. - Un'immagine creata dinamicamente da una funzione CSS di sfumatura.
Impostazione di un'immagine di sfondo con la funzione CSS url
Sfondi CSS con gradiente
Esistono diverse funzioni CSS gradient che ti consentono di generare un'immagine di sfondo quando vengono passati due o più colori.
Indipendentemente dalla funzione di gradiente utilizzata, l'immagine risultante ha dimensioni intrinseche corrispondenti alla quantità di spazio disponibile.
Demo che mostra un esempio di applicazione di un'immagine di sfondo utilizzando le funzioni di gradiente:
Immagini di sfondo ripetitive
Per impostazione predefinita, le immagini di sfondo vengono ripetute orizzontalmente e verticalmente per riempire l'intero spazio del livello di sfondo.
Per modificare questo comportamento, utilizza la proprietà background-repeat
con uno dei seguenti valori:
repeat
: l'immagine viene ripetuta nello spazio disponibile, ritagliata se necessario.round
: l'immagine viene ripetuta orizzontalmente e verticalmente per adattarsi al maggior numero di istanze nello spazio disponibile. Man mano che lo spazio disponibile aumenta, l'immagine si allunga e, dopo aver allungato metà della larghezza originale dell'immagine, si comprime per aggiungere altre istanze dell'immagine.space
: l'immagine viene ripetuta orizzontalmente e verticalmente per adattarsi al maggior numero di istanze nello spazio disponibile senza ritagliarla, distanziando le istanze dell'immagine in base alle esigenze. Le immagini ripetute toccano i bordi dello spazio occupato da un livello di sfondo, con spazi bianchi distribuiti uniformemente tra di loro.
La proprietà background-repeat
consente di impostare il comportamento per l'asse x e l'asse y in modo indipendente. Il primo parametro imposta il comportamento di ripetizione orizzontale e il secondo parametro imposta il comportamento di ripetizione verticale.
Se utilizzi un singolo valore, questo verrà applicato sia alle ripetizioni orizzontali che a quelle verticali.
La stenografia offre anche comode opzioni di una sola parola per chiarire le tue intenzioni.
Il valore repeat-x
ripete un'immagine solo orizzontalmente ed è equivalente a repeat no-repeat
.
La seguente demo mostra queste funzionalità della proprietà background-repeat
:
Posizione di sfondo
Probabilmente avrai notato che alcune immagini sul web sono stilizzate con una dichiarazione background-repeat: no-repeat
e vengono visualizzate in alto a sinistra del relativo contenitore.
La posizione iniziale delle immagini di sfondo è in alto a sinistra. La proprietà background-position
ti consente di modificare questo comportamento spostando la posizione dell'immagine.
Come per background-repeat
, la proprietà background-position
consente di posizionare le immagini lungo gli assi X e Y in modo indipendente con due valori per impostazione predefinita.
Quando vengono utilizzate lunghezze e percentuali CSS, il primo parametro corrisponde all'asse orizzontale, mentre il secondo all'asse verticale.
Quando le parole chiave vengono utilizzate solo, l'ordine non è importante:
background-position: left 50%;
background-position: top left;
background-position: left top;
background-position: 50% left;
background-position: left right;
La proprietà background-position
ha anche una comoda abbreviazione con un solo valore; il valore omesso viene risolto in 50%
. Ecco un esempio che lo dimostra utilizzando le parole chiave accettate dalla proprietà background-position
:
Oltre alla forma predefinita con due parametri e a quella con un parametro, la proprietà background-position
accetta anche fino a quattro parametri.
Quando vengono utilizzati tre o quattro parametri, una lunghezza o una percentuale CSS deve essere preceduta dalle parole chiave top
, left
, right
o bottom
affinché il browser calcoli da quale bordo della casella CSS debba provenire l'offset.
Quando vengono utilizzati tre parametri, una lunghezza o un valore CSS può essere il secondo o il terzo parametro, mentre gli altri due sono parole chiave. La parola chiave che segue verrà utilizzata per determinare il bordo a cui corrisponde la lunghezza o il valore CSS come offset. L'offset dell'altra parola chiave specificata è impostato su 0.
background-position: bottom 88% right;
background-position: right bottom 88%;
background-position: 88% bottom right;
background-position: bottom 88% right 33%;
background-position: right 33% bottom 88%;
background-position: 88% 33% bottom left;
Se background-position: top left 20%
viene applicato a un'immagine di sfondo CSS, l'immagine viene posizionata nella parte superiore della casella. Il valore 20%
rappresenta un offset del 20% rispetto alla parte sinistra della casella (sull'asse x).
Se background-position: top 20% left
viene applicato a un'immagine di sfondo CSS, il valore 20% rappresenta un offset del 20% dalla parte superiore della casella CSS (sull'asse y) e l'immagine viene posizionata a sinistra della casella.
Quando vengono utilizzati quattro parametri, le due parole chiave vengono associate a due valori corrispondenti a un offset rispetto alle origini di ciascuna parola chiave specificata. Se background-position: bottom 20% right 30%
viene applicato a un'immagine di sfondo, quest'ultima viene posizionata a 20% dal basso e a 30% dalla destra della casella CSS.
La seguente demo mostra questo comportamento:
Ecco altri esempi di utilizzo della proprietà background-position
con una combinazione di valori CSS e parole chiave:
Dimensioni sfondo
La proprietà background-size
imposta le dimensioni delle immagini di sfondo. Per impostazione predefinita, le dimensioni delle immagini di sfondo si basano su larghezza, altezza e proporzioni intrinseche (effettive).
La proprietà background-size
utilizza valori CSS di lunghezza e percentuale o parole chiave specifiche. La proprietà accetta fino a due parametri che ti consentono di modificare indipendentemente la larghezza e l'altezza di uno sfondo.
La proprietà background-size
accetta le seguenti parole chiave:
auto
: se utilizzata in modo indipendente, l'immagine di sfondo viene ridimensionata in base alla larghezza e all'altezza intrinseche. Seauto
viene utilizzato insieme a un altro valore CSS per la larghezza (primo parametro) o l'altezza (secondo parametro), la dimensione impostata suauto
viene ridimensionata in base alle esigenze per mantenere le proporzioni naturali dell'immagine. Questo è il comportamento predefinito della proprietàbackground-size
.cover
: copre l'intera area del livello di sfondo. Ciò potrebbe significare che l'immagine è scalata o ritagliata.contain
: ridimensiona l'immagine in modo da riempire lo spazio senza estenderla o ritagliarla. Di conseguenza, può rimanere uno spazio vuoto che causerà la ripetizione dell'immagine, a meno chebackground-repeat
non sia impostato suno-repeat
.
Questi ultimi due sono pensati per essere utilizzati in modo autonomo senza un altro parametro.
La seguente demo mostra queste parole chiave in azione:
Demo che mostra l'applicazione di queste parole chiave a background-size
:
Allegato di sfondo
La proprietà background-attachment
ti consente di modificare il comportamento della posizione fissa delle immagini di sfondo (parti di un livello di sfondo) quando il livello è visibile su uno schermo.
Accetta tre parole chiave: scroll
, fixed
e local
.
Il comportamento predefinito della proprietà background-attachment
è il valore iniziale di scroll
. Quando è necessario più spazio, le immagini si spostano all'interno del livello di sfondo in base ai limiti della casella CSS.
L'utilizzo del valore fixed
fissa la posizione delle immagini di sfondo all'area visibile.
Una volta che lo spazio occupato dalle immagini del livello di sfondo deve essere srotolato (o visualizzato) fuori dallo schermo, le immagini all'interno del livello di sfondo rimangono fisse nella posizione originale consentita dal livello di sfondo finché l'intero livello non viene srotolato fuori dallo schermo dal viewport.
La parola chiave local
consente di fissare la posizione delle immagini di sfondo rispetto ai contenuti dell'elemento. Le immagini di sfondo ora si spostano nello spazio che occupano man mano che questo viene visualizzato all'interno e all'esterno dei limiti della casella CSS (di solito a causa di scorrimento, trasformazioni 2D o 3D).
Origine sfondo
La proprietà background-origin
ti consente di modificare l'area degli sfondi associati a una determinata casella. I valori accettati dalla proprietà corrispondono alle regioni border-box
, padding-box
e content-box
di una casella .
Prova queste opzioni utilizzando la seguente demo:
Clip di sfondo
La proprietà background-clip
controlla ciò che è visibile da un livello di sfondo, indipendentemente dai limiti creati dalla proprietà background-origin
.
Come background-origin
, le regioni che possono essere specificate sono border-box
, padding-box
e content-box
, che corrispondono a dove può essere visualizzato un livello di sfondo CSS. Quando vengono utilizzate queste parole chiave, qualsiasi rendering dello sfondo oltre la regione specificata verrà ritagliato o tagliato.
La proprietà background-clip
accetta anche una parola chiave text
che taglia lo sfondo in modo che non sia più lontano del testo all'interno della casella dei contenuti. Affinché questo effetto sia evidente nel testo effettivo all'interno di una casella CSS, il testo deve essere parzialmente o completamente trasparente.
Una proprietà relativamente nuova, al momento della stesura di questo articolo, Chrome e la maggior parte dei browser richiedono il prefisso -webkit-
per utilizzarla.
Più sfondi
Come accennato all'inizio del modulo, il livello di sfondo consente di definire più livelli secondari. Per brevità, farò riferimento a questi sottolivelli come sfondi.
Sono definiti più sfondi dall'alto verso il basso; il primo sfondo è il più vicino all'utente, mentre l'ultimo è il più lontano.
L'unico sfondo definito o l'ultimo livello è designato come livello di sfondo finale dal browser. Solo questo livello può assegnare un background-color
.
È possibile configurare più livelli singolarmente utilizzando la maggior parte delle proprietà CSS relative allo sfondo separate da virgola, come dimostrato nello snippet di codice e nella demo dal vivo di seguito.
background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
url("https://assets.codepen.io/7518/blob.svg"),
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%, 0% 0%;
background-origin: padding-box, border-box, content-box;
La scorciatoia per lo sfondo
Per semplificare la definizione dello stile del livello di sfondo di una casella, in particolare quando sono necessari più livelli di sfondo, esiste una scorciatoia che segue il seguente pattern specifico:
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?
L'ordine è importante nella forma abbreviata per la dichiarazione di più sfondi. I valori di posizione e dimensione devono essere forniti entrambi, separati da una barra (/
). Dichiarare l'origine e il comportamento del clip nell'ordine corretto ti consente di impostare parole chiave valide per entrambi contemporaneamente.
La seguente dichiarazione ritaglia lo sfondo e lo genera dalla casella dei contenuti:
background: url("https://assets.codepen.io/7518/blob.svg") 50%
50% / contain no-repeat content-box;
Tenendo presente questa semantica abbreviata, le precedenti dichiarazioni relative allo sfondo dello snippet di codice potrebbero essere riscritte nel seguente modo:
background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;
Verificare di aver compreso
Verifica le tue conoscenze sugli sfondi CSS
Le immagini di sfondo sono posizionate in alto a sinistra di una casella CSS.
Le immagini di sfondo vengono ripetute per impostazione predefinita.
Quali delle seguenti dichiarazioni background-position
sono valide?
background-position: left
background-position: top right 33%
background-position: 50% left
background-position: right bottom
Per impostare un'immagine di sfondo fissa all'interno di un viewport, utilizza:
background-attachment: scroll
background-fixed-to-viewport: true
background-position: fixed
background-attachment: fixed
Il valore predefinito di background-origin di uno sfondo all'interno di una casella CSS è:
margin-box
content-box
border-box
padding-box