css - type - Utilizzo di valori percentuali con posizione di sfondo su un gradiente lineare



sfondi gradient (1)

C'è un modo per fare in modo che la background-position prenda valori percentuali? Attualmente il mio pulsante funziona solo con valori espliciti per width e background-position .

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  width: 350px;
  height: 50px;
  border: 1px solid green;
  transition: background 0.5s;
  background-repeat: no-repeat;
  background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
  background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
  background-position: 0px 0px, 350px 0px;
}
.button-percentage {
  background-position: -100% 0px, 0px 0px;
}
.button-percentage:hover {
  background-position: 0% 0px, 100% 0px;
}
<a href="#" class="button button-pixel">In Pixel</a>
<a href="#" class="button button-percentage">In Percentage</a>


TL; DR

Tutti i valori percentuali utilizzati con la background-position sono equivalenti quando si utilizza un gradiente come sfondo, quindi non si noterà alcuna differenza. Devi specificare una background-size diversa dalla dimensione del contenitore:

body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-height:90vh;
}

.button {
  text-decoration: none;
  color: white;
  font-weight: bold;
  width: 350px;
  height: 50px;
  text-align:center;
  transition: background 0.5s;
  background-repeat: no-repeat;
  background-image: 
    linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), 
    linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
  background-size:200% 100%; /*Changed this*/
}
.button-pixel {
  background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
  background-position: 0px 0px, 350px 0px;
}
.button-percentage {
  background-position: 100% 0px, 0px 0px;
}
.button-percentage:hover {
  background-position: 0% 0px, 100% 0px;
}
<a href="#" class="button button-pixel">Pixel</a>
<a href="#" class="button button-percentage">Percentage</a>

Come funziona la posizione in background?

Usiamo un'immagine classica per spiegare come funziona la background-position .

Quando si utilizzano i valori di pixel, il riferimento è l' angolo superiore / sinistro dell'immagine, qualunque sia la dimensione. È come usare in top / a left con un elemento posizionato:

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:0 0;
  background-repeat:no-repeat;
  position:relative;
  animation:back 5s infinite linear alternate;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background:red;
  z-index:1;
  animation:change 5s infinite linear alternate;
}
@keyframes back{
  to{background-position:200px 200px;}
}
@keyframes change{
  to{top:200px; left:200px;}
}
<div class="box">

</div>

Quando si utilizzano valori percentuali, il riferimento è diverso da quando si utilizzano i valori di pixel; non è più l'angolo superiore / sinistro:

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:0% 0%;
  background-repeat:no-repeat;
  position:relative;
  animation:back 5s infinite linear alternate;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background:red;
  z-index:1;
  animation:change 5s infinite linear alternate;
}
@keyframes back{
  to{background-position:100% 100%;}
}
@keyframes change{
  to{top:200px; left:200px;}
}
<div class="box">

</div>

In questo caso, dobbiamo considerare due parametri: la dimensione del contenitore E la dimensione dell'immagine. Ecco un'illustrazione di come funziona (ho preso una background-position pari al 30% 30% ):

Innanzitutto, consideriamo l'immagine per trovare il punto di riferimento che useremo per posizionare l'immagine. È il punto all'interno dell'immagine che è posizionato al 30% 30% dall'angolo superiore / sinistro considerando le dimensioni dell'immagine (come definito con le linee verdi). Quindi, posizioniamo quel punto all'interno del contenitore al 30% 30% dall'angolo superiore / sinistro considerando le dimensioni del contenitore .

Da questa logica, possiamo identificare chiaramente alcuni casi banali come

50% 50% (al centro) 100% 100% (in basso a destra) 100% 0% (in alto a destra)

1 Sotto l'elenco completo dei valori

Ora è chiaro che se la dimensione dell'immagine è uguale alla dimensione del contenitore, allora non succederà nulla semplicemente perché tutte le posizioni sono equivalenti . La parte superiore / sinistra dell'immagine è già nella parte superiore / sinistra (0% 0%) del contenitore, il centro è già al centro (50% 50%) ecc.

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/200/200?image=1069);
  border:1px solid;
  background-position:0% 0%;
  background-repeat:no-repeat;
  position:relative;
  animation:back 5s infinite linear alternate;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background:red;
  z-index:1;
  animation:change 5s infinite linear alternate;
}
@keyframes back{
  to{background-position:100% 100%;}
}
@keyframes change{
  to{top:calc(100% - 5px); left:calc(100% - 5px);}
}
<div class="box">

</div>

La logica di cui sopra è la stessa quando applicata ai gradienti poiché i gradienti sono considerati immagini e, per impostazione predefinita, se non si specifica una background-size un gradiente sarà la dimensione del suo contenitore, diversamente da quando si utilizza un'immagine.

Se ci riferiamo alla specification della background-size dello background-size , possiamo vedere come sorge il tuo problema:

Nota:

Se entrambi i valori sono auto, utilizzare la larghezza e / o l'altezza intrinseca dell'immagine , se presenti, la dimensione mancante (se presente) che si comporta come auto come descritto sopra. Se l'immagine non ha né una larghezza intrinseca né un'altezza intrinseca, la sua dimensione è determinata come per contenere .

E:

contenere

Ridimensiona l'immagine, preservandone le proporzioni intrinseche (se presenti), alla dimensione massima in modo tale che sia la sua larghezza che la sua altezza possano adattarsi all'interno dell'area di posizionamento dello sfondo.

E anche:

Un'immagine bitmap (come JPG) ha sempre dimensioni e proporzioni intrinseche .

I CSS <gradient> non hanno dimensioni intrinseche o proporzioni intrinseche . ref

Un'immagine ha sempre valori intrinseci, quindi nella maggior parte dei casi non avrà le stesse dimensioni del suo contenitore, quindi la background-position con unità percentuali avrà un effetto. Ma i gradienti non hanno valori intrinseci, quindi le dimensioni di un gradiente saranno uguali alle dimensioni del suo contenitore e la background-position con valori percentuali non funzionerà mai a meno che non specifichiamo una background-size diversa dalle background-size del suo contenitore.


Più in profondità

Abbiamo visto negli esempi sopra come funziona la background-size quando si usano valori compresi tra 0% e 100% , ma che dire dell'utilizzo di valori negativi o di un valore maggiore del 100% ? La logica è la stessa, ma trovare il punto di riferimento sarà più complicato.

Valori negativi (<0%)

Supponiamo di voler posizionare uno sfondo al -50% 0 . In questo caso il punto di riferimento sarà all'esterno dell'immagine. Ecco un esempio:

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/100/100?image=1069) -50% 0/100px 100px no-repeat;
}
<div class="box"></div>

Come possiamo vedere nell'illustrazione, consideriamo prima il -50% dell'immagine, che è -50px , al fine di definire il nostro punto di riferimento (cioè, -50px dal bordo sinistro dell'immagine). Quindi posizioniamo quel punto al -50% considerando la dimensione del contenitore (-100px dal bordo sinistro del contenitore). Quindi disegniamo l'immagine e otteniamo il risultato sopra. Sono visibili solo 100px dell'immagine.

Potremmo anche notare che valori percentuali negativi si comporteranno come valori fissi negativi quando la dimensione dell'immagine è inferiore alla dimensione del contenitore (entrambi sposteranno l'immagine a sinistra). In questo caso -50% 0 è uguale a -50px 0 .

.box {
  width:200px;
  height:200px;
  display:inline-block;
  border:1px solid;
  background:url(https://picsum.photos/100/100?image=1069) -50% 0/100px 100px no-repeat;
}
.alt{
  background:url(https://picsum.photos/100/100?image=1069) -50px 0/100px 100px no-repeat;
}
<div class="box">
</div>
<div class="box alt">
</div>

Se, ad esempio, aumentiamo la dimensione dell'immagine a -25px 0 , -50% 0 sarà uguale a -25px 0 .

Quando aumentiamo le dimensioni del contenitore , i valori negativi inizieranno a spostare l'immagine verso destra (come con valori di pixel positivi), il che è logico poiché il 50% dell'immagine aumenterà mentre il 50% del contenitore rimarrà il stesso.

Se consideriamo l'illustrazione precedente, è come aumentare la linea verde in alto fino a quando non è più grande di quella in basso. Quindi il solo segno non è sufficiente per sapere come verrà spostata l'immagine di sfondo; dobbiamo anche considerare le dimensioni.

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/300/300?image=1069) -50% 0/150px 150px no-repeat;
  animation:change 2s linear infinite alternate; 
}
@keyframes change{
  from {background-size:50px 50px}
  to {background-size:300px 300px}
}
<div class="box">
</div>

Lo stesso accadrà logicamente per i gradienti:

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:linear-gradient(to right,red,blue) -50% 0/150px 50px no-repeat;
  animation:change 2s linear infinite alternate; 
}
@keyframes change{
  from {background-size:50px  50px}
  to   {background-size:300px 50px}
}
<div class="box">
</div>

Valori elevati (> 100%)

Stessa logica di prima: se definiamo uno sfondo al 150% 0 , consideriamo il nostro punto di riferimento 150% dal bordo sinistro (o 50% dal bordo destro), quindi lo posizioniamo al 150% dal bordo sinistro del contenitore .

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/100/100?image=1069) 150% 0/100px 100px no-repeat;
}
<div class="box">
</div>

In questo caso, il 150% 0 equivale a 150px 0 e se iniziamo ad aumentare le dimensioni dello sfondo avremo lo stesso comportamento dimostrato in precedenza:

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/300/300?image=1069) 150% 0/100px 100px no-repeat;
  animation:change 2s infinite linear alternate;
}
@keyframes change {
  from {background-size:50px 50px}
  to {background-size:300px 300px}
}
<div class="box">
</div>


Casi speciali

L'uso di valori al di fuori dell'intervallo [0% 100%] ci consente di nascondere l'immagine di sfondo, ma come possiamo trovare i valori esatti per nascondere completamente l'immagine?

Consideriamo l'illustrazione seguente:

La nostra immagine ha una larghezza Ws e il contenitore una larghezza Wp e dobbiamo trovare il valore di p . Dalla figura possiamo ottenere la seguente formula:

p * Wp = p * Ws + Ws   <=>   p = Ws/(Wp - Ws)   where p in [0,1]

Se la dimensione del contenitore è 200px e l'immagine è 100% 100px allora p è 1 quindi 100% (aggiungiamo ovviamente il segno negativo ed è -100% ).

Possiamo renderlo più generico se consideriamo i valori percentuali con background-size dello background-size anziché valori fissi. Supponiamo che la background-size dello background-size sia S% . Quindi avremo Ws = Wp * s (s in [0,1] and S=s*100%) e la formula sarà

p = Ws/(Wp - Ws)   <=>   p = s / (1 - s)

Aggiungendo il segno negativo sarà p = s / (s - 1) .

Ora, se vogliamo nascondere l'immagine a destra, facciamo la stessa logica a destra (consideriamo uno specchio dell'illustrazione precedente), ma poiché considereremo sempre il bordo sinistro per trovare la percentuale, dobbiamo aggiungere 100% .

La nuova percentuale p'% è 100% + p% e la formula sarà p' = 1 + p --> p' = 1 + s / (1 - s) = 1 / (1 - s) .

Ecco un'animazione per illustrare il calcolo sopra:

.box {
  width:200px;
  height:50px;
  margin:5px;
  border:1px solid;
  background-image:linear-gradient(to right,red,blue);
  background-position:0 0;
  background-size:calc(var(--s) * 100%) 100%;
  background-repeat:no-repeat;
  animation:change 4s linear infinite alternate;
}
@keyframes  change{
   from { /*Hide on the left*/
     background-position:calc(var(--s)/(var(--s) - 1) * 100%)
   }
   to { /*Hide on the right*/
     background-position:calc(1/(1 - var(--s)) * 100%)
   }
}
<div class="box" style="--s:0.5">
</div>
<div class="box" style="--s:0.8">
</div>
<div class="box" style="--s:2">
</div>

Calcoliamo alcuni valori:

Quando s=0.5 , abbiamo una background-size pari al 50% e i valori percentuali saranno compresi tra -100% e 200% . In questo caso, abbiamo iniziato con un valore negativo e si è concluso con un valore positivo perché la dimensione dell'immagine è inferiore alla dimensione del contenitore . Se consideriamo l'ultimo caso ( s=2 ) la background-size dello background-size è pari al 200% e i valori percentuali saranno compresi tra il 200% e il -100% . Abbiamo iniziato con un valore positivo e si è concluso con uno negativo perché la dimensione dell'immagine è maggiore della dimensione del contenitore .

Ciò conferma ciò che abbiamo detto in precedenza: per spostare un'immagine a sinistra abbiamo bisogno di valori negativi se la dimensione è piccola, ma abbiamo bisogno di valori positivi se la dimensione è grande (stessa cosa per la destra).


Relazione tra pixel e valori percentuali

Definiamo un modo per calcolare i valori percentuali in base ai valori dei pixel o viceversa (ovvero la formula da convertire tra entrambi). Per fare ciò dobbiamo semplicemente considerare i punti di riferimento.

Quando utilizziamo i valori dei pixel, considereremo le linee blu e avremo la background-position:XY .

Quando utilizziamo i valori percentuali, considereremo le linee verdi e avremo la background-position:Px Py .

La formula sarà la seguente: Y + Py * Ws = Py * Wp dove Ws è la larghezza dell'immagine e Wp è la larghezza del contenitore (stessa formula per l'asse X considerando l'altezza).

Avremo Y = Py * (Wp - Ws) . Da questa formula possiamo convalidare due punti come spiegato in precedenza:

  • Quando Wp = Ws , la formula non è più valida, il che conferma che i valori percentuali non hanno alcun effetto quando la dimensione dell'immagine è uguale al contenitore; pertanto non esiste alcuna relazione tra pixel e valori percentuali.
  • Y e Py avranno lo stesso segno quando Wp > Ws e avranno il segno opposto quando Wp < Ws . Ciò conferma che il valore percentuale si comporta in modo diverso a seconda della dimensione dell'immagine.

Possiamo anche esprimere la formula in modo diverso se consideriamo il valore percentuale della background-size dello background-size . Avremo Y = Py * Wp * (1-s) .

Ecco un'animazione per illustrare il calcolo sopra:

.box {
  width:200px;
  height:50px;
  margin:5px;
  border:1px solid;
  background-image:linear-gradient(to right,red,blue);
  background-position:0 0;
  background-size:calc(var(--s) * 100%) 100%;
  background-repeat:no-repeat;
  animation:percentage 2s linear infinite alternate;
}
.box.alt {
  animation-name:pixel; 
}
@keyframes  percentage{
   from { background-position:-50%;}
   to { background-position:150%;}
}
@keyframes  pixel{
   from { background-position:calc(-0.5 * 200px * (1 - var(--s))) }
   to {  background-position:calc(1.5 * 200px * (1 - var(--s)));}
}
<div class="box" style="--s:0.5">
</div>
<div class="box alt" style="--s:0.5">
</div>

<div class="box" style="--s:2">
</div>
<div class="box alt" style="--s:2">
</div>


Modifica del riferimento

Nei calcoli sopra, abbiamo sempre considerato l'angolo superiore / sinistro dell'immagine e il contenitore al fine di applicare la nostra logica per valori di pixel o valori percentuali. Questo riferimento può essere modificato aggiungendo più valori alla background-position di background-position .

Per impostazione predefinita background-position: XY equivale alla background-position: left X top Y di background-position: left X top Y (posizione in X da left e in Y top ). Regolando in top e / o a left cambiamo il riferimento e il modo in cui l'immagine viene posizionata. Ecco alcuni esempi:

.box {
  width:150px;
  height:150px;
  display:inline-block;
  background-image:url(https://picsum.photos/70/70?image=1069);
  border:1px solid;
  background-position:0 0;
  background-repeat:no-repeat;
  position:relative;
}

body {
 margin:0;
}
<div class="box"></div>
<div class="box" style="background-position:left 0 bottom 0"></div>
<div class="box" style="background-position:right 0 bottom 0"></div>
<div class="box" style="background-position:right 0 top 0"></div>


<div class="box" style="background-position:right 10% top 30%"></div>
<div class="box" style="background-position:right 10% bottom 30%"></div>
<div class="box" style="background-position:right 10px top 20px"></div>
<div class="box" style="background-position:left 50% bottom 20px"></div>

È chiaro che per il valore X possiamo usare solo left e right (la posizione orizzontale) e con il valore Y possiamo usare solo il bottom e la top (la posizione verticale). Con tutte le diverse combinazioni possiamo logicamente ottenere i 4 angoli diversi.

Questa funzione è utile anche per ottimizzare alcuni calcoli. Nell'esempio della sezione casi speciali , abbiamo fatto un primo calcolo per nascondere l'immagine a sinistra, quindi un altro per nasconderla a destra. Se consideriamo di cambiare il riferimento, dobbiamo solo fare un calcolo. Prendiamo la formula usata per il lato sinistro e usiamo lo stesso sul lato destro.

Ecco la nuova versione:

.box {
  width:200px;
  height:50px;
  margin:5px;
  border:1px solid;
  background-image:linear-gradient(to right,red,blue);
  background-position:0 0;
  background-size:calc(var(--s) * 100%) 100%;
  background-repeat:no-repeat;
  animation:change 4s linear infinite alternate;
}
@keyframes  change{
   from { /*Hide on the left*/
     background-position:left calc(var(--s)/(var(--s) - 1) * 100%) top 0
   }
   to { /*Hide on the right*/
     background-position:right calc(var(--s)/(var(--s) - 1) * 100%) top 0
   }
}
<div class="box" style="--s:0.5">
</div>
<div class="box" style="--s:0.8">
</div>
<div class="box" style="--s:2">
</div>

Per s=0.5 non animeremo più da -100% a 200% MA sarà da left -100% a right -100% .

Ecco un altro esempio usando i valori dei pixel in cui possiamo vedere chiaramente quanto è facile gestire il calcolo quando si cambia il riferimento:

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:0 0;
  background-repeat:no-repeat;
  animation:change 2s infinite linear;
}


@keyframes change{
  0%{background-position:left 20px top 20px;}
  25%{background-position:right 20px top 20px;}
  50%{background-position:right 20px bottom 20px;}
  75%{background-position:left 20px bottom 20px;}
  100%{background-position:left 20px top 20px;}
}
<div class="box"></div>

Sarebbe difficile ottenere la stessa animazione mantenendo lo stesso riferimento. Quindi, se vogliamo fare un'animazione simmetrica, facciamo la nostra logica da un lato e usiamo la stessa dall'altro cambiando il riferimento.


Combinazione di pixel e valori percentuali

In CSS3 possiamo usare calc() per fare alcuni calcoli complessi che coinvolgono diverse unità. Ad esempio, possiamo scrivere width:calc(100px + 20% + 12em) e il browser calcolerà il valore calcolato considerando come funziona ciascuna unità e termineremo con un valore in pixel (in questo caso).

Che dire background-position di background-position ? Se scriviamo calc(50% + 50px) , verrà valutato un valore percentuale o un valore pixel? il valore del pixel verrà convertito in percentuale o l'opposto?

Il risultato non verrà convertito in un valore in pixel o in un valore percentuale, ma piuttosto entrambi verranno utilizzati insieme! background-position ha un comportamento speciale quando si mescolano valori di percentuale e pixel in calc() e la logica è la seguente:

  1. Innanzitutto utilizziamo il valore percentuale per posizionare l'immagine applicando tutta la logica relativa ai valori percentuali.
  2. Consideriamo la posizione di (1) come riferimento e utilizziamo il valore di pixel per posizionare nuovamente l'immagine applicando tutta la logica relativa ai valori di pixel.

Quindi calc(50% + 50px) significa: centrare l'immagine, quindi spostarla di 50px a sinistra.

Questa funzione può semplificare molti calcoli. Ecco un esempio:

.box {
  width:200px;
  height:200px;
  display:inline-block;
  border:1px solid;
  background-image:
    linear-gradient(red,red),
    linear-gradient(red,red),
    linear-gradient(red,red),
    linear-gradient(red,red);
 background-size:20px 20px;
 background-position:
    calc(50% + 20px) 50%,
    calc(50% - 20px) 50%,
    50% calc(50% - 20px),
    50% calc(50% + 20px);
 background-repeat:no-repeat;
 transition:0.5s;
}
.box:hover {
  background-position:50%;
}
<div class="box"></div>
<div class="box" style="width:100px;height:100px;"></div>

Sarebbe noioso trovare i valori corretti di percentuale o pixel per posizionare i 4 quadrati rossi come sopra, ma mescolare entrambi usando calc() è abbastanza facile.

Supponiamo di avere qualcosa del genere: calc(10% + 20px + 30% + -10px + 10% + 20px) . Come gestirà il browser?

In tal caso, il browser valuterà prima ogni unità per ottenere il modulo semplificato calc(X% + Ypx) quindi applicherà la logica sopra per posizionare l'immagine.

calc(10% + 20px + 30% + -10px + 10% + 20px) 
calc((10% + 30% + 10%) + (20px + -10px +20px)) 
calc(50% + 30px)

.box {
  display:inline-block;
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:calc(10% + 20px + 30% + -10px + 10% + 20px) 0;
  background-repeat:no-repeat;
}
.alt {
  background-position:calc(50% + 30px) 0;
}
 
<div class="box"></div>
<div class="box alt"></div>

Qualunque sia la complessità della formula, il browser valuterà sempre i valori di percentuale e pixel separatamente.


Utilizzando più unità

Oltre all'unità px , possiamo anche usare tutte le unità comuni all'interno della posizione di sfondo come em , ch , ex , rem , cm ecc. Tutte si comporteranno come valori di pixel.

.box {
  display:inline-block;
  width:200px;
  height:200px;
  font-size:25px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:50px 0;
  background-repeat:no-repeat;
}
.em {
  background-position:2em 0;
}
.ch {
  background-position:2ch 0;
}
:root { font-size:50px}
.rem {
  background-position:1rem 0;
}
<div class="box"></div>
<div class="box em"></div>
<div class="box ch"></div>
<div class="box rem"></div>

Quindi possiamo usare valori percentuali o valori di lunghezza ( px , em , ch , ecc.)


Utilizzando background-origin

Ecco un'altra proprietà importante che può essere utilizzata per modificare la posizione dell'immagine di sfondo. Questa proprietà si basa sul modello di casella, quindi consente di ottenere un rapido promemoria su come funziona:

Ogni elemento contiene 3 scatole diverse al suo interno: border-box, padding-box e content-box. background-origin specifica quale casella dobbiamo considerare per fare tutta la nostra logica precedente.

Ecco un esempio autoesplicativo:

.box {
  display:inline-block;
  width:200px;
  height:200px;
  font-size:25px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:20px solid rgba(0,0,0,0.1);
  padding:20px;
  background-position:0 0;
  background-repeat:no-repeat;
  box-sizing:border-box;
}
.border {
  background-origin:border-box;
}
.padding {
  background-origin:padding-box; /*the default value*/
}
.content {
  background-origin:content-box;
}
<div class="box border"></div>
<div class="box padding"></div>
<div class="box content"></div>

Dovrebbe essere chiaro ora che quando non abbiamo il padding content-box è equivalente al padding-box , e quando non abbiamo il bordo border-box è equivalente al padding-box .


1 : Ecco l'elenco completo dei valori equivalenti:

  • left = left center = center left = 0 50%
  • right = right center = center right = 100% 50%
  • top = top center = center top = 50% 0
  • bottom = bottom center = center bottom = 50% 100%
  • center = center center = 50% 50%


  • top left = a left top = 0 0
  • top right = a right top = 100% 0
  • bottom left = in left bottom = 0 100%
  • bottom right = in right bottom = 100% 100%


  • top X left Y = a left Y top X = YX
  • top X right Y = a right Y top X
  • bottom X left Y = left Y bottom X
  • bottom X right Y = a right Y bottom X

Riferimento ufficiale: https://www.w3.org/TR/css-backgrounds-3/


Nella maggior parte dei casi, ho considerato solo un asse per la spiegazione / calcolo, ma le stesse regole si applicano ad entrambi gli assi ed entrambi sono indipendenti.





background-position