Hvordan bruke bakgrunns Beliggenhet Eiendom i CSS

Formålet med background-posisjon eiendommen er å angi posisjonen for et bakgrunnsbilde. Denne artikkelen vil forklare de ulike verdiene som gjelder for background-position.

Bruksanvisning

1 Hvis ingen bakgrunn-posisjon er navngitt, er standardposisjonen øverst til venstre posisjon av elementet.

2 En verdi kan tildeles denne egenskapen som enten en lengde, en prosentandel eller bruker spesifikke søkeord.

3 En lengde verdi plasserer bakgrunnsbildet på nøyaktig horisontal og vertikal posisjon navngitt. En enkelt lengde verdi, for eksempel:

eksempel {

background-position: 200px;

}

representerer både en horisontal posisjon 200px fra venstre og en vertikal posisjon 200px fra toppen.

4 To verdier, representerer den horisontale og vertikale, for eksempel:

eksempel {

background-position: 100px 200px;

}

5 Stillingen kan gis ved hjelp av nøkkelordene for horisontale stillinger: venstre, senter, høyre. For vertikale posisjonene, er disse søkeordene tillatt: toppen, midten nederst. For eksempel:

eksempel {

background-position: left center;

}

6 Prosent verdier plassere et bilde i en posisjon knyttet til både elementet blir gitt en background-image og det faktiske bildet selv. For eksempel:

eksempel {

background-position: 30% 50%;

}

steder av bildet, ved 30% av bildets bredde og 50% av bildets høyde ved en posisjon 30% fra venstre og 50% fra toppen av det inneholdende elementet.

7 Enkelte prosentverdiene samsvarer med søkeordene:
0% = venstre eller topp
50% = center
100% = høyre eller nederst
For eksempel background-posisjon: left toppen;
er den samme som bakgrunnen-stilling: 0% 0%;

8 Negative lengde og prosentverdier er tillatt. Dette kan flytte plasseringen av noen eller alle av bakgrunnsbildet utenfor grensene for det inneholdende elementet. Den delen utenfor grensene for det inneholdende elementet ikke ville være synlige. På et brukerdefinert forandring, kanskje svever over en kobling, kan den skjulte delen av bakgrunnsbildet bli avslørt ved å endre bakgrunns-plasseringen av bakgrunnsbilde.