Háttérismétlés - CSS-trükkök

Anonim

Ha meg background-imagevan adva egy tulajdonság, akkor background-repeata CSS- ben lévő tulajdonság meghatározza, hogy (és hogyan) megismétlődik. Íme egy példa:

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

Ezek a tulajdonság lehetséges értékei (a szokásos dolgok mellett inherit):

  • repeat: csempézze a képet mindkét irányba. Ez az alapértelmezett érték.
  • repeat-x: csempézze a képet vízszintesen
  • repeat-y: függőlegesen csempézi a képet
  • no-repeat: ne csempézzen, csak egyszer mutassa meg a képet
  • space: csempézze a képet mindkét irányba. Soha ne vágja le a képet, kivéve, ha egyetlen kép túl nagy ahhoz, hogy elférjen. Ha több kép is elfér, helyezze el azokat a képeken, mindig érintve a széleket.
  • round: csempézze a képet mindkét irányba. Soha ne vágja le a képet, kivéve, ha egyetlen kép túl nagy ahhoz, hogy elférjen. Ha több kép is elfér a maradék térben, akkor szűkítse őket, vagy nyújtsa ki őket, hogy kitöltse a helyet. Ha kevesebb, mint egy képszélesség fele maradt, akkor nyújtsa ki, ha több, akkor nyújtsa ki.

A két érték szintaxisa is létezik:

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

Ezáltal az egyértékű szintaxisok csak a kétértékű szintaxis rövidítése. Például roundvalóban round round.

Akkor is vesszővel elválaszthat több értéket, ha több háttérrel rendelkezik.

Demó

Lásd a
CSS-Tricks (@ css-tricks)
tollal történő ismétlését a CodePen-en.

Interaktív bemutató arról, hogyan spaceés hogyan roundműködik, összehasonlítva a következőkkel repeat:

Lásd
Chris Coyier (@chriscoyier)
tollának különböző háttérismétlőit a CodePen-en.

Egy másik átméretező demó, amely „hamis” határt mutat:

Lásd a tollal
ellátott szegélyképet a Könnyű módon a ShopTalk Show-tól (@shoptalkshow)
a CodePen-en.

Itt van egy újabb szórakoztató bemutató hamburgerrel background-repeat: round;.

Összefüggő

  • háttér-kötődés
  • háttér-klip
  • háttérszín
  • háttérkép
  • háttér-eredet
  • háttér-helyzet
  • háttérméret

Erőforrások

  • CSS3 Spec
  • MDN

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

A vesszővel elválasztott többértékű szintaxist csak a Firefox 3.6+ és az IE 9+ verziók támogatják. A vízszintes és vertikális értékek vezérlésének kétértékű szintaxisa csak a Firefox 13+ és az IE 9+ verziókban támogatott. A roundés spacekulcsszavak csak Firefox 49+ és IE 9+.