Opakovanie pozadia - Triky CSS

Anonim

Ak background-imageje zadaná vlastnosť, táto background-repeatvlastnosť v CSS definuje, či (a ako) sa bude opakovať. Tu je príklad:

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

Toto sú možné hodnoty pre túto vlastnosť (okrem obvyklých vecí ako inherit):

  • repeat: dlaždica obrázka v oboch smeroch. Toto je predvolená hodnota.
  • repeat-x: horizontálne dlaždice obrázka
  • repeat-y: zvisle vykachličkovať obrázok
  • no-repeat: neobkladajte dlaždice, obrázok stačí zobraziť iba raz
  • space: dlaždica obrázka v oboch smeroch. Obrázok nikdy neorezávajte, pokiaľ nie je jeden obrázok príliš veľký na to, aby sa doň vošiel. Ak sa zmestí viac obrázkov, rozmiestnite ich rovnomerne tak, aby sa vždy dotýkali okrajov.
  • round: dlaždica obrázka v oboch smeroch. Obrázok nikdy neorezávajte, pokiaľ nie je jeden obrázok príliš veľký na to, aby sa doň vošiel. Ak sa do zvyšného priestoru zmestí viac obrázkov, rozstrapkajte ich alebo ich roztiahnite, aby vyplnili priestor. Ak zostáva menej ako polovica jednej šírky obrázka, roztiahnite sa, ak je jej viac.

Existuje aj dve hodnotová syntax:

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

Vďaka tomu sú syntaxe s jednou hodnotou len skratkou pre syntax s dvoma hodnotami. Napríklad roundje round round.

Ak pracujete s viacerými pozadiami, môžete tiež oddeliť čiarkou viac hodnôt.

Ukážka

Pozrite si
opakovanie pozadia pera od CSS-Tricks (@ css-tricks)
na CodePen.

Interaktívna ukážka ako spacea roundfungovať v porovnaní s repeat:

Pozrite si pero
The different `background-repeat`s od Chrisa Coyiera (@chriscoyier)
na CodePen.

Ďalšie ukážka zmeny veľkosti, ktorá zobrazuje „falošnú“ hranicu:

Pozrite si
obrázok okraja prispôsobeného peru jednoduchou cestou prostredníctvom ShopTalk Show (@shoptalkshow)
na stránkach CodePen.

Je tu ďalšia zábavná ukážka s ukážkami hamburgerov background-repeat: round;.

Súvisiace

  • príloha na pozadí
  • klip na pozadie
  • farba pozadia
  • obrázok na pozadí
  • pôvod pozadia
  • Pozícia na pozadí
  • veľkosť pozadia

Zdroje

  • CSS3 Spec
  • MDN

Podpora prehľadávača

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

Syntax viacerých hodnôt oddelených čiarkami je podporovaný iba vo Firefoxoch 3.6+ a IE 9+. Syntax dvoch hodnôt na riadenie oddelených horizontálnych a vertikálnych hodnôt je podporovaná iba vo prehliadačoch Firefox 13+ a IE 9+. roundA spacekľúčové slová sú len Firefox 49+ a IE 9+.