Taustasend - CSS-trikid

Lang L: none (table-of-contents)

background-positionVara CSS võimaldab teil liikuda taustapildi (või gradient) ümber tema konteiner.

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

Sellel on kolme erinevat tüüpi väärtusi:

  • Pikkuse väärtused (nt 100px 5px)
  • Protsendid (nt 100% 5%)
  • Märksõnad (nt top right)

Vaikeväärtused on 0 0. See asetab teie taustpildi konteineri vasakusse ülaossa.

Pikkuse väärtused on üsna lihtsad: esimene väärtus on horisontaalne asend, teine ​​väärtus on vertikaalne asend. Nii 100px 5pxnihutatakse pilti 100 pikslit paremale ja viis pikslit allapoole. Pikkuse väärtusi saate määrata nii px, emkui mis tahes muus CSS-i pikkuse väärtuses.

Protsendid töötavad veidi teisiti. Võtke matemaatikamütsid välja: taustpildi X% võrra teisaldamine tähendab, et see joondab pildi X% punkti konteineri X% punktiga. Näiteks 50%tähendab see , et see joondab pildi keskosa konteineri keskosaga. 100%tähendab, et see joondab pildi viimase piksli konteineri viimase piksliga jne.

Märksõnad on vaid protsentide otseteed. Seda on lihtsam meeles pidada ja kirjutada top rightkui 100% 0ja seetõttu on märksõnad asi. Siin on kõigi viie märksõna ja nende samaväärsete väärtuste loend:

  • top: 0% vertikaalselt
  • right: 100% horisontaalselt
  • bottom: 100% vertikaalselt
  • left: 0% horisontaalselt
  • center: 50% horisontaalselt, kui horisontaalne pole veel määratletud. Kui see on nii, rakendatakse seda vertikaalselt.

Huvitav on märkida, et pole tähtis, millist järjekorda märksõnade jaoks kasutate: top centeron sama mis center top. Saate seda teha ainult siis, kui kasutate ainult märksõnu. center 10%ei ole sama mis 10% center.

Demo

See demo näitab näiteid background-positionkomplekti pikkuse ühikute, protsentide ja märksõnadega.

Vaadake CodePenil CSS-Tricksi pliiatsi taustapositsiooni väärtusi (@ css-tricks).

Väärtuste deklareerimine

background-positionTänapäevastes brauserites saate anda kuni neli väärtust (üksikasju vt tabelist Brauseri tugi).

Kui deklareerite ühe väärtuse , on see väärtus horisontaalne nihe. Brauser seab vertikaalse nihke väärtuseks center.

Kui deklareerite kaks väärtust , on esimene väärtus horisontaalne nihe ja teine ​​vertikaalne nihe.

Asjad muutuvad veidi keerulisemaks, kui hakkate kasutama kolme või nelja väärtust, kuid saate ka rohkem kontrolli oma tausta paigutuse üle.

Kolme või nelja väärtusega süntaks vaheldub märksõnade ja pikkuse või protsendi ühikute vahel. Võite kasutada mis tahes märksõna väärtusi, välja arvatud centerkolme- või neljaväärtuslikus background-positiondeklaratsioonis.

Kui määrate kolm väärtust , tõlgendab brauser „puuduva“ neljanda väärtuse väärtuseks 0. Siin on näide kolme väärtusest background-position:

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

See asetab taustpildi paremalt 45 pikslit ja mahuti alt 0 pikslit.

Siin on näide nelja väärtusest background-position :

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

See paneb taustpildi paremalt 45 pikslit ja konteineri alt 20 pikslit.

Pange tähele ülaltoodud näidete väärtuste järjekorda: märksõnad, millele järgnevad pikkuse ühikud. Kolme- või neljaväärtuslik background-positionpeab järgima seda vormingut, kusjuures märksõna eelneb pikkuse või protsendi ühikule.

Demo

See demo sisaldab näiteid ühest, kahest, kolmest ja neljast väärtusest background-position.

Vaadake CodePenil CSS-Tricksi (@ css-tricks) pliiatsi taustaasendi 1, 2, 3 ja 4 väärtuste süntaksit.

Seotud

  • taust-kinnitus
  • taustklipp
  • taustavärv
  • taustapilt
  • taust-päritolu
  • taust-kordus
  • tausta suurus

Rohkem ressursse

  • background-position CSS3 spetsifikatsioonis
  • background-position juures MDN
  • Nihe taustpildid

Brauseri tugi

Põhiväärtusi toetatakse kõikjal. Nelja väärtusega süntaksil on see tugi:

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
25 13 9 12 7

Mobiil / tahvelarvuti

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

See on samal tasemel tugi kui background-position-xja background-position-yomadused.

Huvitavad Artiklid...