Pozadina-položaj - CSS-trikovi

Anonim

background-positionNekretnina u CSS vam omogućuje da se presele pozadinsku sliku (ili gradijent) oko u kontejneru.

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

Ima tri različite vrste vrijednosti:

  • Vrijednosti duljine (npr. 100px 5px)
  • Postoci (npr. 100% 5%)
  • Ključne riječi (npr. top right)

Zadane vrijednosti su 0 0. To postavlja vašu pozadinsku sliku u gornji lijevi dio spremnika.

Vrijednosti duljine prilično su jednostavne: prva vrijednost je vodoravni položaj, druga vrijednost okomiti položaj. Tako 100px 5pxće se slika pomaknuti za 100 piksela udesno i pet piksela prema dolje. Vrijednosti duljine možete postaviti u px, emili bilo koju drugu CSS vrijednost duljine.

Postoci djeluju malo drugačije. Izvadite matematičke kape: pomicanje pozadinske slike za X% znači da će poravnati točku X% na slici s točkom X% u spremniku. Na primjer, 50%znači da će sredinu slike poravnati sa sredinom spremnika. 100%znači da će poravnati zadnji piksel slike s posljednjim pikselom spremnika, i tako dalje.

Ključne riječi samo su prečaci za postotke. Lakše je pamtiti i pisati top rightnego 100% 0, i zato su ključne riječi stvar. Evo popisa svih pet ključnih riječi i njihovih ekvivalentnih vrijednosti:

  • top: 0% okomito
  • right: 100% vodoravno
  • bottom: 100% okomito
  • left: 0% vodoravno
  • center: 50% vodoravno ako vodoravno još nije definirano. Ako jest, ovo se primjenjuje okomito.

Zanimljivo je primijetiti da nije važno koji redoslijed koristite za ključne riječi: top centerje li isti kao center top. To možete učiniti samo ako koristite isključivo ključne riječi. center 10%nije isto što i 10% center.

Demo

Ova demonstracija prikazuje primjere background-positionskupa s jedinicama duljine, postocima i ključnim riječima.

Pogledajte vrijednosti položaja olovke u pozadini pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Deklariranje vrijednosti

background-positionU modernim preglednicima možete dati do četiri vrijednosti (za detalje pogledajte tablicu Podrška za preglednike).

Ako prijavite jednu vrijednost , ta je vrijednost horizontalni pomak. Preglednik postavlja vertikalni pomak na center.

Kad deklarirate dvije vrijednosti , prva vrijednost je vodoravni pomak, a druga vrijednost vertikalni pomak.

Stvari postaju malo zamršenije kad počnete upotrebljavati tri ili četiri vrijednosti, ali dobivate i veću kontrolu nad položajem u pozadini.

Sintaksa s tri ili četiri vrijednosti izmjenjuje se između ključnih riječi i jedinica duljine ili postotka. Možete koristiti bilo koju vrijednost ključne riječi, osim centeru background-positiondeklaraciji s tri ili četiri vrijednosti .

Kada navedete tri vrijednosti , preglednik interpetira "nedostajuću" četvrtu vrijednost kao 0. Evo primjera tri vrijednosti background-position:

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

Time se pozadinska slika postavlja 45 piksela zdesna i 0 piksela s dna spremnika.

Evo primjera četvero vrijednosti background-position :

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

To stavlja pozadinsku sliku 45 piksela s desne strane i 20 piksela s dna spremnika.

Primijetite redoslijed vrijednosti u gornjim primjerima: ključne riječi nakon kojih slijede jedinice duljine. Tri ili četiri vrijednosti background-positionmoraju slijediti taj format, s ključnom riječi koja prethodi duljini ili postotnoj jedinici.

Demo

Ova demonstracija uključuje primjere jedne vrijednosti, dvije vrijednosti, tri vrijednosti i četiri vrijednosti background-position.

Pogledajte sintaksu vrijednosti pozadine položaja olovke 1, 2, 3 i 4 tvrtke CSS-Tricks (@ css-tricks) na CodePen-u.

Povezano

  • pozadina-prilog
  • pozadina-isječak
  • boja pozadine
  • pozadinska slika
  • podrijetlo podrijetla
  • pozadina-ponavljanje
  • veličina pozadine

Više resursa

  • background-position u specifikaciji CSS3
  • background-position na MDN
  • Offset pozadinske slike

Podrška preglednika

Osnovne vrijednosti podržane su svugdje. Sintaksa s četiri vrijednosti ima ovu podršku:

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
25 13 9 12 7

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7,0-7,1

To je ista razina podrške kao background-position-xi background-position-ysvojstva.