Lo scopo della proprietà background-position è per impostare la posizione di un'immagine di sfondo. Questo articolo spiega i vari valori che si applicano alla proprietà background-position.

istruzione

1 Se nessun background-position è chiamato, la posizione predefinita è nella posizione in alto a sinistra dell'elemento.

2 Un valore può essere assegnato a questa proprietà sia come una lunghezza, una percentuale o utilizzando parole chiave specifiche.

3 Un valore di lunghezza posiziona l'immagine di sfondo nella posizione orizzontale e verticale esatta di nome. Un valore di lunghezza singola, per esempio:

esempio {

background-position: 200px;

}

rappresenta sia una posizione orizzontale 200px da sinistra e una posizione verticale 200px dall'alto.

4 Due valori, rappresentano l'orizzontale e verticale, per esempio:

esempio {

background-position: 100px 200px;

}

5 La posizione può essere somministrato utilizzando le seguenti parole chiave per le posizioni orizzontali: sinistra, centro, destra. Per le posizioni verticali, queste parole chiave sono consentiti: alto, al centro, in basso. Per esempio:

esempio {

background-position: left center;

}

6 Valori percentuali collocano un'immagine in una posizione relativa sia all'elemento viene data una immagine di sfondo e l'immagine reale stessa. Per esempio:

esempio {

background-position: 30% 50%;

}

posiziona l'immagine al 30% della larghezza dell'immagine e il 50% dell'altezza dell'immagine in una posizione 30% da sinistra e 50% dall'alto dell'elemento di contenimento.

7 Alcuni valori percentuali corrispondono parole chiave:
0% = sinistra o in alto
50% = center
100% = a destra o in basso
Per esempio background-position: left top;
è la stessa come background-position: 0% 0%;

8 valori di lunghezza e percentuali negativi sono ammessi. Questo può spostare la posizione di alcuni o tutti i immagine di sfondo fuori dei confini dell'elemento contenitore. La parte fuori dei confini dell'elemento contenente non sarebbe visibile. Su un cambiamento creati dagli utenti, forse in bilico su un link, la parte nascosta dell'immagine di sfondo può essere rivelato cambiando la background-position del background-image.