Fono padėtis - CSS-gudrybės

Anonim

background-positionCSS nuosavybė leidžia jums perkelti fono paveikslėlis (ar gradientas) aplink jos konteinerį.

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

Jis turi tris skirtingas vertybių rūšis:

  • Ilgio vertės (pvz. 100px 5px)
  • Procentai (pvz. 100% 5%)
  • Raktiniai žodžiai (pvz. top right)

Numatytosios reikšmės yra 0 0. Tai jūsų fono paveikslėlis dedamas konteinerio viršuje kairėje.

Ilgio vertės yra gana paprastos: pirmoji vertė yra horizontali, antroji - vertikali. Taigi 100px 5pxvaizdas bus perkeltas 100 taškų į dešinę ir penki pikseliai žemyn. Galite nustatyti ilgio verčių px, emarba bet kuriai CSS ilgio vertėmis.

Procentai veikia šiek tiek kitaip. Išimkite matematines kepures: perkėlę fono paveikslėlį X%, tai suderins paveikslėlyje esantį X% tašką su talpyklos X% tašku. Pavyzdžiui, 50%tai reiškia, kad jis sulygins vaizdo vidurį su konteinerio viduriu. 100%reiškia, kad jis sulygins paskutinį vaizdo tašką su paskutiniu konteinerio tašku ir pan.

Raktiniai žodžiai yra tik procentų nuorodos. Tai lengviau prisiminti ir rašyti, top rightnei 100% 0, todėl raktiniai žodžiai yra dalykas. Čia pateikiamas visų penkių raktinių žodžių ir jų ekvivalentiškų verčių sąrašas:

  • top: 0% vertikaliai
  • right: 100% horizontaliai
  • bottom: 100% vertikaliai
  • left: 0% horizontaliai
  • center: 50% horizontaliai, jei horizontalus dar nenustatytas. Jei taip, tai taikoma vertikaliai.

Įdomu pažymėti, kad nesvarbu, kokia tvarka naudojate raktinius žodžius: top centeryra tokia pati kaip center top. Vis dėlto tai galite padaryti tik tuo atveju, jei naudojate tik raktinius žodžius. center 10%nėra tas pats kaip 10% center.

Demonstracija

Šioje demonstracijoje rodomi background-positionrinkinio su ilgio vienetais, procentais ir raktiniais žodžiais pavyzdžiai.

„CodePen“ peržiūrėkite „CSS-Tricks“ (@ css-tricks) „Pen“ fono padėties vertes.

Vertybių deklaravimas

background-positionŠiuolaikinėse naršyklėse galite pateikti iki keturių reikšmių (išsamesnės informacijos ieškokite naršyklės palaikymo lentelėje).

Jei deklaruojate vieną vertę , ši vertė yra horizontalus poslinkis. Naršyklė nustato vertikalųjį poslinkį į center.

Kai deklaruojate dvi reikšmes , pirmoji reikšmė yra horizontalusis poslinkis, o antroji - vertikalusis poslinkis.

Viskas tampa šiek tiek sudėtingesnė, kai pradedate naudoti tris ar keturias reikšmes, bet jūs taip pat geriau kontroliuojate savo fono vietą.

Trijų ar keturių reikšmių sintaksė keičia raktinius žodžius ir ilgio arba procentinius vienetus. Galite naudoti bet kurią iš raktinių žodžių reikšmių, išskyrus centertrijų ar keturių reikšmių background-positiondeklaracijas.

Kai nurodote tris reikšmes , naršyklė interpretuoja „trūkstamą“ ketvirtąją reikšmę kaip 0. Štai trijų reikšmių pavyzdys background-position:

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

Fono paveikslėlis išdėstomas 45 taškų iš dešinės ir 0 taškų nuo talpyklos apačios.

Štai keturių verčių pavyzdys background-position:

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

Foninis vaizdas bus rodomas iš 45 taškų iš dešinės ir 20 taškų nuo konteinerio apačios.

Atkreipkite dėmesį į aukščiau pateiktuose pavyzdžiuose pateiktų verčių eiliškumą: raktiniai žodžiai ir ilgio vienetai. Trijų ar keturių reikšmių reikšmė background-positionturi būti tokia, kad raktinis žodis būtų nurodytas prieš ilgio arba procento vienetą.

Demonstracija

Šioje demonstracijoje yra vienos vertės, dviejų, trijų ir keturių verčių pavyzdžiai background-position.

Peržiūrėkite „CSP-Tricks“ (@ css-tricks) „CodePen“ rašiklio „Pen“ 1, 2, 3 ir 4 vertės sintaksę.

Susijęs

  • prisirišimas prie fono
  • fono klipas
  • fono spalva
  • fonas-vaizdas
  • fono kilmė
  • fonas pakartoti
  • fono dydis

Daugiau išteklių

  • background-position CSS3 spec
  • background-position MDN
  • Poslinkio fono paveikslėliai

Naršyklės palaikymas

Pagrindinės vertybės palaikomos visur. Keturių reikšmių sintaksė palaiko:

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
25 13 9 12 7

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 4.4 7,0–7,1

Tai tas pats palaikymo lygis kaip background-position-xir background-position-ysavybės.