Ozadje-ponovitev - CSS-triki

Anonim

Če je background-imagelastnost podana, background-repeatlastnost v CSS določa, ali se bo (in kako) ponovila. Tu je primer:

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

To so možne vrednosti za to lastnost (poleg običajnih stvari, kot so inherit):

  • repeat: slika ploščice v obe smeri. To je privzeta vrednost.
  • repeat-x: vodoravno ploščico slike
  • repeat-y: sliko ploščic postavite navpično
  • no-repeat: ne ploščice, samo enkrat pokaži sliko
  • space: slika ploščice v obe smeri. Nikoli ne obrežite slike, razen če je ena slika prevelika, da bi se prilegala. Če se lahko prilega več slik, jih razmaknite ob priložnostnih slikah, ki se vedno dotikajo robov.
  • round: slika ploščice v obe smeri. Nikoli ne obrežite slike, razen če je ena slika prevelika, da bi se prilegala. Če se več slik lahko prilega ostanku prostora, jih stisnite ali raztegnite, da zapolnijo prostor. Če je manj kot pol ene širine slike, raztegnite, če je več, pa raztegnite.

Obstajata tudi dve sintaksi vrednosti:

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

Kar naredi sintakse z eno vrednostjo samo okrajšava za sintakso z dvema vrednostma. Na primer, roundres je round round.

Več vrednosti lahko ločite tudi z vejico, če imate opravka z več ozadji.

Demo

Oglejte si Pen
background-repeat by CSS-Tricks (@ css-tricks)
na CodePen.

Interaktivni demo o tem, kako spacein kako rounddelati, v primerjavi z repeat:

Oglejte si Pen
The Different `background-repeat`s Chrisa Coyierja (@chriscoyier)
na CodePen.

Še ena predstavitev o spreminjanju velikosti, ki prikazuje "lažno" obrobo:

Oglejte si
sliko Pen Fitted Border Image the Easy Way by ShopTalk Show (@shoptalkshow)
na CodePen.

Tu je še ena zabavna predstavitev s predstavitvijo hamburgerjev background-repeat: round;.

Sorodno

  • ozadje-priloga
  • posnetek za ozadje
  • Barva ozadja
  • slika ozadja
  • izvor-izvor
  • položaj ozadja
  • velikost ozadja

Viri

  • CSS3 Spec
  • MDN

Podpora za brskalnik

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

Sintana z več vrednostmi, ločena z vejico, je podprta samo v Firefoxu 3.6+ in IE 9+. Sintaksa z dvema vrednostma za nadzor vodoravnih in navpičnih vrednosti je ločena samo v Firefoxu 13+ in IE 9+. roundIn spaceključne besede so le Firefox 49+ in IE 9+.