Taust-kordus - CSS-trikid

Lang L: none (table-of-contents)

Kui background-imagevara on määratud, background-repeatvara CSS määratleb kui (ja kuidas) see kordub. Siin on näide:

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

Need on selle atribuudi võimalikud väärtused (lisaks tavalistele asjadele inherit):

  • repeat: paani pilt mõlemas suunas. See on vaikeväärtus.
  • repeat-x: pane pilt horisontaalselt
  • repeat-y: pane pilt vertikaalselt paanile
  • no-repeat: ära pane, vaid näita pilti üks kord
  • space: paani pilt mõlemas suunas. Ärge kunagi kärpige pilti, kui üks pilt ei ole selle mahutamiseks liiga suur. Kui mahub mitu pilti, asetage need välja piltidele, puudutades alati servi.
  • round: paani pilt mõlemas suunas. Ärge kunagi kärpige pilti, kui üks pilt ei ole selle mahutamiseks liiga suur. Kui ruumi mahajäämisel mahub mitu pilti, siis tühjendage need või venitage need ruumi täitmiseks. Kui pildi laiusest on vähem kui pool, venitage, kui rohkem, venitage.

Samuti on kaks väärtuse süntaksit:

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

Mis muudab ühe väärtusega süntaksid kahe väärtusega süntaksiks lihtsalt lühidaks. Näiteks roundon tõesti round round.

Samuti võite komaga eraldada mitu väärtust, kui tegemist on mitme taustaga.

Demo

Vaadake CodePenil
CSS-
Tricksi (@ css-tricks) pliiatsi taustakorda

Interaktiivne demo selle kohta, kuidas spaceja kuidas round, võrreldes järgmisega repeat:

Vaadake
Chris Coyieri (@chriscoyier) pliiatsit Erinevad taustakordused
CodePenis.

Teine demo suuruse muutmine, millel on „võlts” piir:

Vaadake
CodePeni
saidil ShopPalk Show (@shoptalkshow) pliiatsiga varustatud piiripilti lihtsal viisil.

Siin on veel üks lõbus demo, kus demonstreeritakse hamburgereid background-repeat: round;.

Seotud

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

Ressursid

  • CSS3 spetsifikatsioon
  • MDN

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

Komaeraldusega mitme väärtusega süntat toetab ainult Firefox 3.6+ ja IE 9+. Kaheväärtuslikku süntaksit horisontaalsete ja vertikaalsete väärtuste kontrollimiseks toetab ainult Firefox 13+ ja IE 9+. roundJa spacemärksõnad on ainult Firefox 49+ ja IE 9+.

Huvitavad Artiklid...