Taustan sijainti - CSS-temppuja

Anonim

background-positionOmaisuus CSS voit siirtää taustakuvan (tai gradientti) ympärillä sen säiliöön.

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

Sillä on kolme erityyppistä arvoa:

  • Pituusarvot (esim. 100px 5px)
  • Prosentit (esim. 100% 5%)
  • Avainsanat (esim. top right)

Oletusarvot ovat 0 0. Tämä sijoittaa taustakuvasi säilön vasempaan yläkulmaan.

Pituusarvot ovat melko yksinkertaisia: ensimmäinen arvo on vaaka-asento, toinen arvo on pystysuora asento. Joten 100px 5pxsiirtää kuvaa 100px oikealle ja viisi pikseliä alaspäin. Voit asettaa pituuksia px, emtai jollekin muulle CSS pituuksia.

Prosenttiosuudet toimivat hieman eri tavalla. Ota matematiikkahatut pois: taustakuvan siirtäminen X%: lla tarkoittaa, että se kohdistaa kuvan X% -pisteen säiliön X% -pisteeseen. Esimerkiksi 50%tarkoittaa, että se kohdistaa kuvan keskikohdan säiliön keskiosaan. 100%tarkoittaa, että se kohdistaa kuvan viimeisen pikselin säiliön viimeiseen pikseliin ja niin edelleen.

Avainsanat ovat vain prosenttien pikavalintoja. Se on helpompi muistaa ja kirjoittaa top rightkuin 100% 0, ja siksi avainsanat ovat asia. Tässä on luettelo kaikista viidestä avainsanasta ja niiden vastaavista arvoista:

  • top: 0% pystysuunnassa
  • right: 100% vaakasuunnassa
  • bottom: 100% pystysuunnassa
  • left: 0% vaakasuunnassa
  • center: 50% vaakasuunnassa, jos vaakaa ei ole jo määritelty. Jos näin on, tätä sovelletaan pystysuunnassa.

On mielenkiintoista huomata, että ei ole väliä mitä järjestystä avainsanoille käytetään: top centeron sama kuin center top. Voit tehdä tämän vain, jos käytät yksinomaan avainsanoja. center 10%ei ole sama kuin 10% center.

Demo

Tässä esittelyssä on esimerkkejä background-positionjoukosta, jossa on pituusyksiköt, prosenttiosuudet ja avainsanat.

Katso CSS-Tricksin kynän taustan sijainti-arvot CodePenistä.

Arvojen ilmoittaminen

Voit antaa background-positionenintään neljä arvoa nykyaikaisissa selaimissa (lisätietoja on selaintukitaulukossa).

Jos ilmoitat yhden arvon , se on vaakasiirtymä. Selain asettaa vertikaalisen siirtymän arvoksi center.

Kun ilmoitat kaksi arvoa , ensimmäinen arvo on vaakasiirtymä ja toinen arvo pystysuuntainen siirtymä.

Asiat muuttuvat hieman hankalammiksi, kun aloitat kolmen tai neljän arvon käytön, mutta saat myös paremman hallinnan taustan sijoittelusta.

Kolmen tai neljän arvon syntaksi vuorottelee avainsanojen ja pituuden tai prosenttiyksiköiden välillä. Voit käyttää mitä tahansa avainsanan arvoista paitsi centerkolmen tai neljän arvon background-positiondeklaraatiossa.

Kun määrität kolme arvoa , selain tulkitsee "puuttuvan" neljännen arvon arvoksi 0. Tässä on esimerkki kolmiarvoisesta arvosta background-position:

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

Tämä sijoittaa taustakuvan 45 kuvapistettä oikealta ja 0 kuvapistettä säiliön pohjalta.

Tässä on esimerkki neliarvoisesta background-position :

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

Tämä asettaa taustakuvan 45 kuvapistettä oikealta ja 20 kuvapistettä säiliön pohjalta.

Huomaa arvojen järjestys yllä olevissa esimerkeissä: avainsanat ja pituuden yksiköt. Kolmen tai neljän arvon background-positionon noudatettava kyseistä muotoa, avainsanan edeltäessä pituus- tai prosenttiyksikköä.

Demo

Tämä esittely sisältää esimerkkejä yhdestä arvosta, kahdesta arvosta, kolmesta arvosta ja neljästä arvosta background-position.

Katso CSS-Tricksin (@ css-tricks) kynän taustakohdan 1, 2, 3 ja 4 arvon syntaksia CodePenistä.

Liittyvät

  • tausta-kiinnitys
  • taustaleike
  • taustaväri
  • taustakuva
  • tausta-alkuperä
  • tausta-toisto
  • taustakoko

Lisää resursseja

  • background-position CSS3-määrityksessä
  • background-position osoitteessa MDN
  • Offset-taustakuvat

Selaimen tuki

Perusarvoja tuetaan kaikkialla. Neljän arvon syntaksilla on tämä tuki:

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
25 13 9 12 7

Matkapuhelin / tabletti

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

Se on samaa tasoa kuin background-position-xja background-position-yominaisuudet.