Opakování pozadí - Triky CSS

Anonim

Pokud background-imageje zadána vlastnost, background-repeatvlastnost v CSS definuje, zda (a jak) se bude opakovat. Zde je příklad:

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

Toto jsou možné hodnoty pro tuto vlastnost (kromě obvyklých věcí jako inherit):

  • repeat: dlaždice v obou směrech. Toto je výchozí hodnota.
  • repeat-x: vodorovně uspořádat obrázek
  • repeat-y: vertikální obkládání obrázku
  • no-repeat: nepokládejte dlaždice, pouze zobrazte obrázek jednou
  • space: dlaždice v obou směrech. Nikdy ořízněte obrázek, pokud není jediný obrázek příliš velký, aby se vešel. Pokud se vejde více obrázků, rozmístěte je rovnoměrně tak, aby se vždy dotýkaly okrajů.
  • round: dlaždice v obou směrech. Nikdy ořízněte obrázek, pokud není jediný obrázek příliš velký, aby se vešel. Pokud se do zbylého prostoru vejde více obrázků, přepláčkněte je nebo roztáhněte a vyplňte tak prostor. Pokud zbývá méně než polovina jedné šířky obrázku, roztáhněte se, pokud je větší, roztáhněte se.

K dispozici je také syntaxe dvou hodnot:

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

Díky čemuž jsou syntaxe jedné hodnoty jen zkratkou pro syntaxi dvou hodnot. Například roundje opravdu round round.

Pokud máte co do činění s více pozadími, můžete také oddělit čárkami více hodnot.

Ukázka

Podívejte se na
opakování pozadí pera pomocí CSS-Tricks (@ css-tricks)
na CodePen.

Interaktivní ukázka toho, jak spacea jak roundfunguje, ve srovnání s repeat:

Podívejte se na Pen
The Different `background-repeat`s od Chrisa Coyiera (@chriscoyier)
na CodePen.

Další ukázka pro změnu velikosti, která ukazuje „falešný“ okraj:

Podívejte se na
obrázek s okrajem přizpůsobeným peru snadnou cestou prostřednictvím ShopTalk Show (@shoptalkshow)
na CodePen.

Zde je další zábavné demo s ukázkami hamburgerů background-repeat: round;.

Příbuzný

  • příloha na pozadí
  • klip na pozadí
  • barva pozadí
  • obrázek na pozadí
  • původ pozadí
  • pozice na pozadí
  • velikost pozadí

Zdroje

  • CSS3 Spec
  • MDN

Podpora prohlížeče

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

Syntaxe více hodnot oddělená čárkami je podporována pouze ve Firefoxu 3.6+ a IE 9+. Syntaxe dvou hodnot pro ovládání oddělených a vodorovných hodnot je podporována pouze ve Firefoxu 13+ a IE 9+. roundA spaceklíčová slova jsou jen Firefox 49+ a IE 9+.