Taustatoisto - CSS-temppuja

Anonim

Jos background-imagemääritetään background-repeatominaisuus, CSS: n ominaisuus määrittelee, toistetaanko (ja miten). Tässä on esimerkki:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Nämä ovat tämän ominaisuuden mahdolliset arvot (tavallisten asioiden lisäksi inherit):

  • repeat: laita kuva molempiin suuntiin. Tämä on oletusarvo.
  • repeat-x: laita kuva vaakasuunnassa
  • repeat-y: laita kuva pystysuunnassa
  • no-repeat: älä laita, näytä kuva vain kerran
  • space: laita kuva molempiin suuntiin. Älä koskaan rajaa kuvaa, ellei yksi kuva ole liian suuri sovitettavaksi. Jos useita kuvia mahtuu, sijoita ne tasaisesti kuviin, jotka koskettavat aina reunoja.
  • round: laita kuva molempiin suuntiin. Älä koskaan rajaa kuvaa, ellei yksi kuva ole liian suuri sovitettavaksi. Jos useampaan kuvaan mahtuu jäljellä oleva tila, purista ne tai venytä niitä täyttämään tila. Jos kuvan leveyttä on alle puolet, venytä, jos enemmän, venytä.

On myös kaksi arvon syntaksia:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Mikä tekee yhden arvon syntaksista vain lyhenteen kaksiarvoiselle syntaksille. Esimerkiksi roundon todella round round.

Voit myös erottaa pilkulla useita arvoja, jos sinulla on useita taustoja.

Demo

Katso
CSS-
Tricksin kynän taustatoisto (@ css-tricks) CodePenistä.

Interaktiivinen esittely miten spaceja miten round, verrattuna repeat:

Katso
Chris Coyierin (@chriscoyier) kynä Eri `` taustan toistoa``
CodePenissä.

Toinen koon muuttava demo, jossa näkyy väärennetty raja:

Katso
CodeTen-sovelluksen ShopTalk Show (@shoptalkshow)
-kynän asentama rajakuvan helppo tapa (@shoptalkshow) .

Tässä on toinen hauska demo, jossa hampurilaiset esittelevät background-repeat: round;.

Liittyvät

  • tausta-kiinnitys
  • taustaleike
  • taustaväri
  • taustakuva
  • tausta-alkuperä
  • taustan sijainti
  • taustakoko

Resurssit

  • CSS3 Spec
  • MDN

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

Pilkuilla erotettu moniarvoinen synta tukee vain Firefox 3.6+ ja IE 9+. Kahden arvon syntaksi, joka ohjaa eroteltuja vaaka- ja pystysuuntaisia ​​arvoja, tukee vain Firefox 13+ ja IE 9+. Ja roundja spaceavainsanat ovat vain Firefox 49+ ja IE 9+.