Background-position - Trucchi CSS

Anonim

La background-positionproprietà in CSS ti consente di spostare un'immagine di sfondo (o gradiente) all'interno del suo contenitore.

html ( background-position: 100px 5px; )

Ha tre diversi tipi di valori:

  • Valori di lunghezza (ad esempio 100px 5px)
  • Percentuali (ad es. 100% 5%)
  • Parole chiave (ad es. top right)

I valori predefiniti sono 0 0. In questo modo l'immagine di sfondo viene posizionata in alto a sinistra nel contenitore.

I valori di lunghezza sono piuttosto semplici: il primo valore è la posizione orizzontale, il secondo valore è la posizione verticale. Quindi 100px 5pxsposterà l'immagine di 100px a destra e cinque pixel in basso. Puoi impostare i valori di lunghezza in px, emo in uno qualsiasi degli altri valori di lunghezza CSS.

Le percentuali funzionano in modo leggermente diverso. Tira fuori i cappelli di matematica: spostare un'immagine di sfondo di X% significa che allineerà il punto X% nell'immagine al punto X% nel contenitore. Ad esempio, 50%significa che allineerà il centro dell'immagine con il centro del contenitore. 100%significa che allineerà l'ultimo pixel dell'immagine con l'ultimo pixel del contenitore e così via.

Le parole chiave sono solo scorciatoie per le percentuali. È più facile da ricordare e scrivere top rightche 100% 0, ed è per questo che le parole chiave sono una cosa. Ecco un elenco di tutte e cinque le parole chiave e dei loro valori equivalenti:

  • top: 0% in verticale
  • right: 100% in orizzontale
  • bottom: 100% in verticale
  • left: 0% in orizzontale
  • center: 50% in orizzontale se orizzontale non è già definito. Se lo è, viene applicato verticalmente.

È interessante notare che non importa quale ordine usi per le parole chiave: top centerè lo stesso di center top. Puoi farlo solo se stai utilizzando esclusivamente parole chiave, però. center 10%non è lo stesso di 10% center.

Demo

Questa demo mostra esempi di background-positionset con unità di lunghezza, percentuali e parole chiave.

Vedi i valori della posizione dello sfondo della penna di CSS-Tricks (@ css-tricks) su CodePen.

Dichiarazione di valori

È possibile fornire background-positionfino a quattro valori nei browser moderni (vedere la tabella Supporto browser per i dettagli).

Se dichiari un valore , quel valore è l'offset orizzontale. Il browser imposta l'offset verticale su center.

Quando si dichiarano due valori , il primo valore è l'offset orizzontale e il secondo valore è l'offset verticale.

Le cose diventano un po 'più complicate quando inizi a utilizzare tre o quattro valori, ma ottieni anche un maggiore controllo sul posizionamento in background.

Una sintassi a tre o quattro valori alterna parole chiave e unità di lunghezza o percentuale. È possibile utilizzare qualsiasi valore della parola chiave tranne centerin una background-positiondichiarazione di tre o quattro valori .

Quando si specificano tre valori , il browser interpreta il quarto valore "mancante" come 0. Ecco un esempio di tre valori background-position:

#threevalues ( background-position: right 45px bottom; )

Questo posiziona l'immagine di sfondo 45px da destra e 0px dal fondo del contenitore.

Ecco un esempio di quattro valori background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

In questo modo l'immagine di sfondo viene posizionata a 45 px da destra e 20 px dal fondo del contenitore.

Notare l'ordine dei valori negli esempi precedenti: parole chiave seguite da unità di lunghezza. Un valore di tre o quattro background-positiondeve seguire quel formato, con una parola chiave che precede un'unità di lunghezza o percentuale.

Demo

Questa demo include esempi di un valore, due valori, tre valori e quattro valori background-position.

Vedere la sintassi dei valori della posizione dello sfondo della penna 1, 2, 3 e 4 di CSS-Tricks (@ css-tricks) su CodePen.

Relazionato

  • sfondo-allegato
  • clip di sfondo
  • colore di sfondo
  • immagine di sfondo
  • background-origin
  • ripetizione in background
  • dimensione dello sfondo

Più risorse

  • background-position nelle specifiche CSS3
  • background-position presso MDN
  • Immagini di sfondo sfalsate

Supporto browser

I valori di base sono supportati ovunque. La sintassi a quattro valori ha questo supporto:

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
25 13 9 12 7

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

È lo stesso livello di supporto delle proprietà background-position-xe background-position-y.