Fona stāvoklis - CSS-triki

Anonim

background-positionĪpašums CSS ļauj pārvietot fona attēlu (vai gradientu) ap tās konteinerā.

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

Tam ir trīs dažādi vērtību veidi:

  • Garuma vērtības (piemēram 100px 5px)
  • Procenti (piem. 100% 5%)
  • Atslēgvārdi (piem. top right)

Noklusējuma vērtības ir 0 0. Tas jūsu fona attēlu novieto konteinera augšējā kreisajā stūrī.

Garuma vērtības ir diezgan vienkāršas: pirmā vērtība ir horizontālā pozīcija, otrā vērtība ir vertikālā pozīcija. Tādējādi 100px 5pxattēls tiks pārvietots par 100 pikseļiem pa labi un pieci pikseļi uz leju. Varat iestatīt garums vērtības px, emvai kādu citu CSS garuma vērtībām.

Procenti darbojas nedaudz savādāk. Iegūstiet matemātiskās cepures: fona attēla pārvietošana par X% nozīmē, ka tas izlīdzinās attēla X% punktu ar konteinera X% punktu. Piemēram, tas 50%nozīmē, ka tas izlīdzinās attēla vidu ar konteinera vidu. 100%nozīmē, ka tas izlīdzinās attēla pēdējo pikseļu ar konteinera pēdējo pikseļu utt.

Atslēgvārdi ir tikai procentuālo saīsnes. To ir vieglāk atcerēties un rakstīt, top rightnekā 100% 0, un tāpēc atslēgvārdi ir lieta. Šeit ir saraksts ar visiem pieciem atslēgvārdiem un to ekvivalentajām vērtībām:

  • top: 0% vertikāli
  • right: 100% horizontāli
  • bottom: 100% vertikāli
  • left: 0% horizontāli
  • center: 50% horizontāli, ja horizontālā vēl nav definēta. Ja tā ir, tad to piemēro vertikāli.

Interesanti atzīmēt, ka nav svarīgi, kādu secību jūs izmantojat atslēgvārdiem: top centerir tāds pats kā center top. Tomēr to var izdarīt tikai tad, ja izmantojat tikai atslēgvārdus. center 10%nav tas pats, kas 10% center.

Demonstrācija

Šajā demonstrācijā ir parādīti background-positionkopas piemēri ar garuma mērvienībām, procentiem un atslēgvārdiem.

Skatiet CSP-Tricks pildspalvas fona stāvokļa vērtības vietnē CodePen.

Vērtību deklarēšana

background-positionMūsdienu pārlūkprogrammās varat norādīt līdz četrām vērtībām (sīkāku informāciju skatiet pārlūkprogrammas atbalsta tabulā).

Ja deklarējat vienu vērtību , šī vērtība ir horizontālā nobīde. Pārlūkprogramma vertikālo nobīdi iestata uz center.

Deklarējot divas vērtības , pirmā vērtība ir horizontālā nobīde, bet otrā - vertikālā nobīde.

Lietas kļūst nedaudz sarežģītākas, kad sākat izmantot trīs vai četras vērtības, bet jūs arī vairāk kontrolējat fona izvietojumu.

Trīs vai četru vērtību sintakse mainās starp atslēgvārdiem un garuma vai procentuālajām vienībām. Varat izmantot jebkuru no atslēgvārda vērtībām, izņemot centertrīs vai četru vērtību background-positiondeklarācijā.

Norādot trīs vērtības , pārlūks interpretē “trūkstošo” ceturto vērtību kā 0. Šeit ir trīs vērtību piemērs background-position:

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

Tas fona attēlu novieto 45 pikseļus no labās puses un 0 pikseļus no konteinera apakšas.

Šeit ir četru vērtību piemērs background-position:

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

Tādējādi fona attēls tiek ievietots 45 pikseļos no labās puses un 20 pikseļi no konteinera apakšas.

Iepriekšējos piemēros ievērojiet vērtību secību: atslēgvārdi, kam seko garuma mērvienības. Trīs vai četrām vērtībām background-positionir jāievēro šis formāts, un atslēgvārds ir pirms garuma vai procentuālās vienības.

Demonstrācija

Šajā demonstrācijā ir vienas vērtības, divu vērtību, trīs vērtību un četru vērtību piemēri background-position.

Skatiet CSS-Tricks (@ css-tricks) CodePen pildspalvas 1., 2., 3. un 4. vērtības sintaksi.

Saistīts

  • fona piestiprināšana
  • fona klips
  • fona krāsa
  • fona attēls
  • fona izcelsme
  • fona atkārtojums
  • fona lielums

Vairāk resursu

  • background-position CSS3 spec
  • background-position pie MDN
  • Fona attēlu nobīde

Pārlūka atbalsts

Pamatvērtības tiek atbalstītas visur. Četru vērtību sintaksei ir šāds atbalsts:

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
25 13 9 12 7

Mobilais / planšetdators

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

Tas ir tāds pats atbalsta līmenis kā background-position-xun background-position-yīpašībām.