Háttér-helyzet - CSS-trükkök

Anonim

A background-positionCSS tulajdonság lehetővé teszi a háttérkép (vagy színátmenet) mozgatását a tárolóban.

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

Három különböző típusú érték van:

  • Hosszértékek (pl. 100px 5px)
  • Százalékok (pl. 100% 5%)
  • Kulcsszavak (pl. top right)

Az alapértelmezett érték 0 0. Ez a háttérképet a tároló bal felső sarkába helyezi.

A hosszértékek nagyon egyszerűek: az első érték a vízszintes helyzet, a második a függőleges helyzet. Tehát 100px 5pxa kép 100 képpontos jobbra és öt képponttal lejjebb kerül. Beállíthatjuk a hosszúság-értékeket px, emvagy bármely más CSS hossz értékeket.

A százalékok kicsit másképp működnek. Vedd elő a matematikai sapkákat: a háttérkép X% -os mozgatása azt jelenti, hogy a képen lévő X% pontot a tárolóban lévő X% ponthoz igazítja. Például 50%azt jelenti, hogy a kép közepét a tároló közepéhez igazítja. 100%azt jelenti, hogy a kép utolsó képpontját a tároló utolsó képpontjához igazítja, és így tovább.

A kulcsszavak csak a százalékok parancsikonjai. Könnyebb megjegyezni és írni, top rightmint 100% 0, és ezért a kulcsszavak egy dolog. Itt van az öt kulcsszó és azok megfelelő értékeinek felsorolása:

  • top: 0% függőlegesen
  • right: 100% vízszintesen
  • bottom: 100% függőlegesen
  • left: 0% vízszintesen
  • center: 50% vízszintesen, ha a vízszintes még nincs meghatározva. Ha igen, akkor ezt függőlegesen alkalmazzák.

Érdekes megjegyezni, hogy nem mindegy, milyen sorrendet használ a kulcsszavakhoz: top centerugyanaz, mint center top. Ezt azonban csak akkor teheti meg, ha kizárólag kulcsszavakat használ. center 10%nem ugyanaz, mint 10% center.

Demó

Ez a bemutató példákat mutat a background-positionhalmazra, hosszegységekkel, százalékokkal és kulcsszavakkal.

Tekintse meg a CSS-Tricks (@ css-tricks) Toll háttér-helyzetértékeit a CodePen-en.

Értékek deklarálása

background-positionLegfeljebb négy értéket adhat meg a modern böngészőkben (a részleteket lásd a Böngészőtámogatás táblázatban).

Ha egy értéket deklarál , akkor ez az érték a vízszintes eltolás. A böngésző a vertikális eltolást állítja center.

Két érték deklarálásakor az első érték a vízszintes eltolás, a második pedig a függőleges eltolás.

A dolgok kissé bonyolultabbá válnak, ha három vagy négy értéket kezd használni, de jobban kontrollálhatja a háttérelhelyezését is.

Három- vagy négyértékű szintaxis váltja a kulcsszavakat és a hossz- vagy százalékos egységeket. Bármelyik kulcsszóértéket használhatja, kivéve centeregy három- vagy négyértékű background-positiondeklarációt.

Három érték megadásakor a böngésző a „hiányzó” negyedik értéket 0-ként értelmezi. Íme egy példa egy háromértékre background-position:

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

Ezzel a háttérkép jobbra 45 képpontos, a tároló aljától pedig 0 képpont képpontig helyezkedik el.

Íme egy példa egy négyértékűre background-position :

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

Ezzel a háttérkép jobbra 45 képpontos, a tároló aljától pedig 20 képpontos lesz.

Figyelje meg az értékek sorrendjét a fenti példákban: kulcsszavak és hosszegységek. Egy három- vagy négyértékűnek background-positionkövetnie kell ezt a formátumot, egy kulcsszónak meg kell előznie egy hossz vagy százalékos egységet.

Demó

Ez a bemutató példákat tartalmaz egy értékre, két értékre, három értékre és négy értékre background-position.

Tekintse meg a CSS-Tricks (@ css-tricks) tollal kapcsolatos 1., 2., 3. és 4. értékének szintaxisát a CodePen-en.

Összefüggő

  • háttér-kötődés
  • háttér-klip
  • háttérszín
  • háttérkép
  • háttér-eredet
  • háttérismétlés
  • háttérméret

További források

  • background-position a CSS3 specifikációjában
  • background-position az MDN-nél
  • Eltolt háttérképek

Böngésző támogatás

Az alapértékek mindenhol támogatottak. A négyértékű szintaxis a következő támogatást nyújtja:

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
25 13. 9. 12. 7

Mobil / Tablet

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

Ez ugyanolyan szintű támogatás, mint a background-position-xés background-position-ytulajdonságokkal.