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;
L'ordine non è rilevante per le parole chiave associate a diversi assi di posizione.
background-position: 50% left;
Quando i valori CSS vengono utilizzati insieme alle parole chiave, l'ordine è importante. Il primo valore rappresenta l'asse orizzontale e il secondo l'asse verticale.
background-position: left right;
Non puoi utilizzare contemporaneamente parole chiave associate allo stesso asse.
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;Il valore della lunghezza CSS deve essere preceduto dalle parole chiave
top, right, bottom o left se vengono utilizzati tre o più parametri.
background-position: bottom 88% right 33%;
background-position: right 33% bottom 88%;
background-position: 88% 33% bottom left;Il valore della lunghezza CSS deve essere preceduto dalle parole chiave
top, right, bottom o left se vengono utilizzati tre o più parametri.
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; quandoautoviene utilizzato insieme a un altro valore CSS per la larghezza (primo parametro) o l'altezza (secondo parametro), la dimensione impostata suautoviene 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-repeatnon 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% leftbackground-position: top right 33%background-position: right bottombackground-position: leftPer impostare un'immagine di sfondo da fissare all'interno di un'area visibile utilizzata:
background-position: fixedbackground-position".
background-fixed-to-viewport: truebackground-fixed-to-viewport non esiste ancora in CSS.
background-attachment: fixedbackground-attachment: fixed imposta esplicitamente l'immagine di sfondo da fissare nell'area visibile corrente.
background-attachment: scrollbackground-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-boxbackground-origin, ma non è il valore predefinito.
border-boxbackground-origin. I bordi predisposti possono essere colorati sopra gli sfondi, ma non è l'impostazione predefinita.
padding-boxbackground-origin. Consente il rendering dello sfondo oltre i contenuti e fino al bordo di una casella.
margin-boxbackground-origin.