Podcast su CSS - 053: informazioni di base
Sfondi
Dietro ogni casella CSS c'è un livello specializzato chiamato livello di sfondo. Il CSS offre una varietà di modi per apportare modifiche significative al file, tra cui l'uso di più sfondi.
I livelli di sfondo sono più distanti dall'utente, visualizzati dietro i contenuti di un riquadro a partire dalla sua regione padding-box
. In questo modo il livello dello sfondo non si sovrappone affatto 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 di visualizzare i 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
Oltre al livello background-color
, puoi aggiungere un'immagine di sfondo usando la proprietà background-image
. Un background-image
accetta quanto segue:
- Un URL immagine o un URI di dati che utilizza la funzione CSS
url
. - Un'immagine creata dinamicamente da una funzione CSS gradiente.
Impostazione di un'immagine di sfondo con la funzione CSS url
Sfondi sfumati CSS
Esistono diverse funzioni CSS gradient per consentirti di generare un'immagine di sfondo quando vengono trasmessi due o più colori.
Indipendentemente dalla funzione gradiente utilizzata, l'immagine risultante viene ridimensionata in modo intrinseco per corrispondere alla quantità di spazio disponibile.
Demo che mostra un esempio di applicazione di un'immagine di sfondo utilizzando funzioni a gradiente:
Immagini di sfondo ripetute
Per impostazione predefinita, le immagini di sfondo si ripetono orizzontalmente e verticalmente per riempire l'intero spazio del livello di sfondo.
Modifica questa impostazione utilizzando la proprietà background-repeat
con uno dei seguenti valori:
repeat
: l'immagine si ripete nello spazio disponibile, ritagliandola secondo necessità.round
: l'immagine si ripete orizzontalmente e verticalmente per adattarsi al maggior numero di istanze disponibili 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 si ripete orizzontalmente e verticalmente per adattarsi a tutte le istanze disponibili nello spazio senza ritagliare, separando le istanze dell'immagine secondo necessità. Le immagini ripetute toccano i bordi dello spazio occupato da un livello di sfondo, con uno spazio bianco distribuito uniformemente tra loro.
La proprietà background-repeat
consente di impostare il comportamento degli assi x e y in modo indipendente. Il primo parametro imposta il comportamento della ripetizione orizzontale, mentre il secondo imposta il comportamento della ripetizione verticale.
Se utilizzi un singolo valore, verrà applicato alle ripetizioni sia orizzontale che verticale.
La forma abbreviata offre anche pratiche opzioni di una sola parola per rendere più chiare le tue intenzioni.
Il valore repeat-x
ripete un'immagine solo orizzontalmente; equivale a repeat no-repeat
.
La demo seguente mostra queste funzionalità della proprietà background-repeat
:
Posizione sfondo
Potresti aver notato che lo stile di alcune immagini sul web è associato a una dichiarazione background-repeat: no-repeat
. Le immagini vengono visualizzate in alto a sinistra nel contenitore.
La posizione iniziale delle immagini di sfondo è in alto a sinistra. La proprietà background-position
ti consente di modificare questo comportamento compensando la posizione dell'immagine.
Come con background-repeat
, per impostazione predefinita la proprietà background-position
consente di posizionare le immagini lungo gli assi x e y in modo indipendente con due valori.
Quando si utilizzano le lunghezze e le percentuali CSS, il primo parametro corrisponde all'asse orizzontale, mentre il secondo all'asse verticale.
Quando le parole chiave vengono utilizzate solo nell'ordine delle parole chiave 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 un comodo valore in forma abbreviata; il valore omesso diventa 50%
. Di seguito è riportato un esempio che dimostra ciò utilizzando le parole chiave accettate dalla proprietà background-position
:
Oltre alla forma predefinita a due parametri e a un solo parametro, la proprietà background-position
accetta anche fino a quattro parametri;
Quando vengono utilizzati tre o quattro parametri, la lunghezza o la percentuale CSS devono essere precedute dalle parole chiave top
, left
, right
o bottom
affinché il browser possa calcolare da quale bordo della casella CSS deve avere origine l'offset.
Quando vengono utilizzati tre parametri, la lunghezza o il valore CSS può essere il secondo o il terzo parametro, mentre gli altri due sono parole chiave. La parola chiave riuscita verrà utilizzata per determinare il bordo a cui corrisponde la lunghezza o il valore CSS come l'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 il valore background-position: top left 20%
viene applicato a un'immagine di sfondo del CSS, l'immagine viene posizionata nella parte superiore della casella, mentre il valore 20%
rappresenta un offset del 20% dal lato sinistro della casella (sull'asse x).
Se background-position: top 20% left
viene applicato a un'immagine di sfondo del CSS, il valore del 20% rappresenta un offset del 20% dalla parte superiore della casella CSS (sull'asse y) e l'immagine viene posizionata a sinistra del riquadro.
Quando vengono utilizzati quattro parametri, le due parole chiave vengono accoppiate con due valori corrispondenti a un offset rispetto alle origini di ogni parola chiave specificata. Se background-position: bottom 20% right 30%
viene applicato a un'immagine di sfondo, quest'ultima viene posizionata al 20% dal basso e al 30% a destra della casella CSS.
La demo seguente 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 vengono stabilite in base a larghezza, altezza e proporzioni intrinseche (effettive).
La proprietà background-size
utilizza valori di lunghezza e percentuale del CSS o parole chiave specifiche. La proprietà accetta fino a due parametri che consentono di modificare in modo indipendente 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 dimensionata in base alla sua larghezza e altezza intrinseche; quandoauto
viene utilizzato insieme a un altro valore CSS per la larghezza (primo parametro) o l'altezza (secondo parametro), la dimensione impostata suauto
viene ridimensionata secondo necessità 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ò può significare che l'immagine è allungata o ritagliata.contain
: ridimensiona l'immagine in modo da riempire lo spazio senza estenderla o ritagliarla. Di conseguenza, può rimanere uno spazio vuoto che determina la ripetizione dell'immagine, a meno chebackground-repeat
non sia impostato suno-repeat
.
Gli ultimi due parametri sono destinati all'utilizzo 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 in background
La proprietà background-attachment
consente di modificare il comportamento della posizione fissa delle immagini di sfondo (immagini che fanno parte di un livello di sfondo) una volta che 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 con quello spazio all'interno del livello di sfondo determinato dai limiti della casella CSS.
L'utilizzo del valore fixed
consente di correggere la posizione delle immagini di sfondo nell'area visibile.
Una volta che lo spazio del livello di sfondo originariamente occupava deve essere fatto scorrere (o renderizzato) fuori schermo, le immagini all'interno del livello di sfondo rimangono fisse nella posizione originale, mentre il livello di sfondo le consente di farlo finché l'intero livello non viene fatto scorrere fuori dallo schermo dall'area visibile.
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 lungo lo spazio che occupano quando questo spazio viene visualizzato all'interno e all'esterno della casella CSS (in genere a causa di trasformazioni 2D o 3D dello scorrimento).
Origine in background
La proprietà background-origin
consente di modificare l'area degli sfondi associata 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 demo seguente:
Clip in background
La proprietà background-clip
controlla ciò che viene visualizzato visivamente 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
, corrispondenti a dove può essere visualizzato un livello di sfondo CSS. Quando vengono utilizzate queste parole chiave, qualsiasi rendering dello sfondo più lontano dell'area specificata verrà ritagliato o ritagliato.
La proprietà background-clip
accetta anche una parola chiave text
che tronca 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 utilizzare questa proprietà.
Più sfondi
Come indicato all'inizio del modulo, il livello di sfondo consente di definire più sottolivelli. Per brevità, chiamerò questi sottolivelli come sfondi.
Sono definiti più sfondi dall'alto verso il basso; il primo è quello più vicino all'utente, mentre l'ultimo è il più lontano.
L'unico sfondo definito o l'ultimo livello viene indicato come livello di sfondo finale dal browser. Solo a questo livello è possibile assegnare un background-color
.
È possibile configurare più livelli singolarmente utilizzando la maggior parte delle proprietà CSS correlate allo sfondo separate da virgole, come mostrato nello snippet di codice e nella demo dal vivo riportati 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 l'applicazione dello stile al livello di sfondo di una casella, in particolare quando si desiderano più livelli di sfondo, è disponibile un'abbreviazione 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 in forma abbreviata in cui si dichiarano molteplici background. Devono essere indicati entrambi i valori di posizione e dimensione, separati da una barra (/
). Dichiarare il comportamento dell'origine e della clip nell'ordine corretto consente di sfruttare l'impostazione di parole chiave valide per entrambi contemporaneamente.
La seguente dichiarazione taglia lo sfondo e lo deriva dalla casella dei contenuti:
background: url("https://assets.codepen.io/7518/blob.svg") 50%
50% / contain no-repeat content-box;
Tenendo a mente questa semantica abbreviata, le precedenti dichiarazioni relative allo sfondo dello snippet di codice potrebbero essere riscritte in questo 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 ;
Verifica la tua comprensione
Verifica le tue conoscenze degli sfondi CSS
Le immagini di sfondo sono posizionate in alto a sinistra in una casella CSS.
background-position
deve essere utilizzato esplicitamente per cambiare la posizione predefinita di un'immagine di sfondo.
Per impostazione predefinita, le immagini di sfondo non vengono ripetute.
background-repeat: no-repeat
deve essere esplicitamente utilizzato per non ripetere un'immagine di sfondo. Inoltre, puoi utilizzare background-repeat: repeat-x
e background-repeat: repeat-y
per evitare la ripetizione sull'asse specifico.
Quali delle seguenti dichiarazioni background-position
è valida?
background-position: 50% left
background-position: top right 33%
background-position: right bottom
background-position: left
Per impostare un'immagine di sfondo da fissare all'interno di un'area visibile utilizzata:
background-position: fixed
background-position
".
background-fixed-to-viewport: true
background-fixed-to-viewport
non esiste ancora in CSS.
background-attachment: fixed
background-attachment: fixed
imposta esplicitamente l'immagine di sfondo da fissare nell'area visibile corrente.
background-attachment: scroll
background-attachment
è la proprietà da utilizzare per impostare un'immagine di sfondo da fissare all'interno di un'area visibile; tuttavia, scroll
è il valore predefinito per la proprietà che, per impostazione predefinita, corregge l'immagine di sfondo alla casella non interessata dai contenuti della casella".
L'origine predefinita di sfondo di uno sfondo all'interno di una casella CSS è:
content-box
background-origin
, ma non è il valore predefinito.
border-box
background-origin
. I bordi predisposti possono essere colorati sopra gli sfondi, ma non è l'impostazione predefinita.
padding-box
background-origin
. Consente il rendering dello sfondo oltre i contenuti e fino al bordo di una casella.
margin-box
background-origin
.