Podcast CSS - 053: Informazioni generali
.
Sfondi
Dietro ogni casella CSS c'è un livello specializzato chiamato strato di sfondo. I CSS offrono vari modi per apportare modifiche significative, ad esempio consentendo l'utilizzo di più sfondi.
I livelli di sfondo, più lontani dall'utente, sono visualizzati dietro i contenuti di un riquadro a partire dall'area padding-box
. In questo modo il livello di sfondo non si sovrapponga affatto ai bordi.
Colore sfondo
Uno degli effetti più semplici che puoi applicare a un livello di sfondo è impostare il colore. Il valore iniziale di background-color
è transparent
e consente di rendere visibili i contenuti di un elemento principale. Un set di colori valido su un livello di sfondo si trova dietro 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 di dati che utilizza la funzione CSS
url
. - Un'immagine creata in modo dinamico da una funzione CSS gradiente.
Impostazione di un'immagine di sfondo con la funzione CSS url
Sfondi gradienti CSS
Esistono diverse funzioni CSS relative al gradiente che consentono di generare un'immagine di sfondo quando vengono trasmessi due o più colori.
Indipendentemente dalla funzione gradiente utilizzata, l'immagine risultante ha dimensioni intrinseche che corrispondano alla quantità di spazio disponibile.
Demo che mostra un esempio di applicazione di un'immagine di sfondo utilizzando le 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.
Per modificare questa impostazione, utilizza la proprietà background-repeat
con uno dei seguenti valori:
repeat
: l'immagine si ripete nello spazio disponibile e viene ritagliata se necessario.round
: l'immagine si ripete orizzontalmente e verticalmente per adattarsi al maggior numero di istanze nello spazio disponibile. Quando lo spazio disponibile aumenta, l'immagine si estende e, dopo averla allungata per metà della larghezza originale, si comprime per aggiungere altre istanze dell'immagine.space
: l'immagine si ripete orizzontalmente e verticalmente per adattarsi al maggior numero di istanze all'interno dello spazio disponibile senza ritagliarle, distribuendo le istanze dell'immagine in base alle esigenze. Le immagini ripetute toccano i bordi dello spazio occupato da un livello di sfondo, con uno spazio bianco distribuito uniformemente tra di loro.
La proprietà background-repeat
consente di impostare il comportamento degli assi x e y in modo indipendente. Il primo parametro imposta il comportamento di ripetizione orizzontale e il secondo quello verticale.
Se utilizzi un singolo valore, questo verrà applicato alle ripetizioni orizzontali e verticali.
La forma abbreviata include anche opzioni pratiche di una sola parola per rendere più chiaro l'intento.
Il valore repeat-x
ripete un'immagine solo orizzontalmente, questo equivale a repeat no-repeat
.
La demo seguente mostra queste funzionalità della proprietà background-repeat
:
Posizione sfondo
Potresti aver notato che alcune immagini sul web presentano uno stile 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 compensando la posizione dell'immagine.
Come nel caso di 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 vengono utilizzate solo le parole chiave, l'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
offre anche un pratico valore abbreviato. il valore omesso si risolve in 50%
. Ecco un esempio che dimostra l'utilizzo delle parole chiave accettate dalla proprietà background-position
:
Oltre al formato predefinito di due parametri e un modulo di un parametro, la proprietà background-position
accetta anche fino a quattro parametri;
Quando si utilizzano tre o quattro parametri, la lunghezza o la percentuale CSS deve essere preceduta dalle parole chiave top
, left
, right
o bottom
affinché il browser possa calcolare da quale bordo del riquadro CSS deve avere origine 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 ha successo sarà utilizzata per determinare il bordo di cui la lunghezza o il valore CSS corrisponde all'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 è posizionata nella parte superiore della casella, il valore 20%
rappresenta un offset del 20% dal lato sinistro del riquadro (sull'asse x).
Se background-position: top 20% left
viene applicato a un'immagine di sfondo CSS, il valore del 20% rappresenta un offset del 20% dalla parte superiore della casella CSS (sull'asse Y) e l'immagine è posizionata a sinistra della casella.
Quando si utilizzano 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 al 20% dal basso e al 30% dal lato destro della casella CSS.
La demo seguente dimostra questo comportamento:
Di seguito sono riportati altri esempi di utilizzo della proprietà background-position
con una combinazione di valori CSS e delle parole chiave:
Dimensione 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 percentuali e lunghezza CSS o parole chiave specifiche. La proprietà accetta fino a due parametri corrispondenti che consentono di modificare la larghezza e l'altezza di uno sfondo in modo indipendente.
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. 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 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 è allungata o ritagliata.contain
: ridimensiona l'immagine in modo che riempia lo spazio senza estenderla o ritagliarla. Di conseguenza, potrebbe rimanere uno spazio vuoto che farà sì che l'immagine si ripeta, a meno chebackground-repeat
non sia impostato suno-repeat
.
Gli ultimi 2 sono destinati a essere utilizzati in modo indipendente senza un altro parametro.
La seguente demo illustra la pratica delle parole chiave:
Demo che mostra l'applicazione di queste parole chiave a background-size
:
Allegato in background
La proprietà background-attachment
ti 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 all'interno del livello di sfondo in base ai limiti del riquadro CSS.
Il valore fixed
fissa la posizione delle immagini di sfondo nell'area visibile.
Una volta che lo spazio del livello di sfondo occupa inizialmente lo scorrimento (o il rendering) fuori schermo, le immagini all'interno del livello di sfondo rimangono nella posizione originale in cui il livello di sfondo ha consentito loro di rimanere 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 muovono lungo lo spazio in cui occupano uno spazio che viene visualizzato all'interno e all'esterno del riquadro CSS (solitamente a causa dello scorrimento, delle trasformazioni 2D o 3D).
Origine in background
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 un riquadro .
Prova queste opzioni utilizzando la seguente demo:
Clip di sfondo
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, l'eventuale rendering dello sfondo oltre l'area specificata verrà ritagliato o tagliato.
La proprietà background-clip
accetta anche una parola chiave text
che ritaglia 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.
Si tratta di una proprietà relativamente nuova. Al momento della stesura del presente documento, Chrome e la maggior parte dei browser richiedono il prefisso -webkit-
per poter utilizzare questa proprietà.
di Gemini Advanced.
Sfondi multipli
Come menzionato all'inizio del modulo, il livello di sfondo consente di definire più sottolivelli. Per brevità, farò riferimento a questi sottolivelli come sfondi.
Vengono definiti più sfondi dall'alto verso il basso. Il primo è il più vicino all'utente, mentre l'ultimo è il più lontano.
L'unico sfondo definito o l'ultimo livello viene designato come livello di sfondo finale dal browser. Solo questo livello può assegnare un background-color
.
È possibile configurare singolarmente più livelli utilizzando la maggior parte delle proprietà CSS relative allo sfondo, separate da virgole, come mostrato 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 forma breve sullo sfondo
Per semplificare lo stile del livello di sfondo di un riquadro, in particolare quando sono richiesti più livelli di sfondo, puoi utilizzare una scorciatoia che segue il seguente schema specifico:
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?
L'ordine è importante nella forma abbreviata di dichiarare più background. I valori di posizione e dimensione devono essere entrambi indicati, separati da una barra (/
). Dichiarare l'origine e il comportamento del clip nell'ordine corretto ti consente di impostare parole chiave che siano valide contemporaneamente per entrambi
La seguente dichiarazione ritaglia lo sfondo e lo ricava dalla casella dei contenuti:
background: url("https://assets.codepen.io/7518/blob.svg") 50%
50% / contain no-repeat content-box;
Tenendo presente questa semantica breve, le precedenti dichiarazioni relative allo sfondo dello snippet di codice potrebbero essere riscritte in modo da essere:
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 le tue conoscenze
Verifica le tue conoscenze degli sfondi CSS
Le immagini di sfondo sono posizionate in alto a sinistra di una casella CSS.
Le immagini di sfondo non vengono ripetute per impostazione predefinita.
Quali delle seguenti dichiarazioni di background-position
sono valide?
background-position: 50% left
background-position: left
background-position: right bottom
background-position: top right 33%
Per impostare un'immagine di sfondo in modo che venga fissata all'interno di un'area visibile utilizza:
background-position: fixed
background-attachment: scroll
background-fixed-to-viewport: true
background-attachment: fixed
L'origine predefinita di uno sfondo all'interno di una casella CSS è:
margin-box
border-box
padding-box
content-box