Background-repeat - CSS-Tricks

Anonim

Jeśli background-imagewłaściwość jest określona, background-repeatwłaściwość w CSS określa, czy (i jak) będzie się powtarzać. Oto przykład:

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

Oto możliwe wartości tej właściwości (oprócz zwykłych rzeczy, takich jak inherit):

  • repeat: sąsiadująco obraz w obu kierunkach. To jest wartość domyślna.
  • repeat-x: sąsiadująco obraz w poziomie
  • repeat-y: sąsiadująco obraz w pionie
  • no-repeat: nie kafelkuj, ​​po prostu pokaż obraz raz
  • space: sąsiadująco obraz w obu kierunkach. Nigdy nie przycinaj obrazu, chyba że pojedynczy obraz jest za duży, aby się zmieścić. Jeśli zmieści się wiele obrazów, rozłóż je tak, aby obrazy zawsze dotykały krawędzi.
  • round: sąsiadująco obraz w obu kierunkach. Nigdy nie przycinaj obrazu, chyba że pojedynczy obraz jest za duży, aby się zmieścić. Jeśli w pozostałej przestrzeni zmieści się wiele obrazów, zgnieć je lub rozciągnij, aby wypełnić przestrzeń. Jeśli pozostało mniej niż połowa szerokości jednego obrazu, rozciągnij, jeśli jest więcej, rozciągnij.

Istnieje również składnia dwóch wartości:

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

Co sprawia, że ​​składnie jednowartościowe są po prostu skrótem dla składni dwuwartościowych. Na przykład roundtak naprawdę round round.

Możesz także oddzielić wiele wartości przecinkami, jeśli masz do czynienia z wieloma tłami.

Próbny

Zobacz
powtarzanie tła pióra przez CSS-Tricks (@ css-tricks)
w CodePen.

Interaktywne demo pokazujące, jak spacei jak rounddziała, w porównaniu z repeat:

Zobacz Pen
The Different `background-repeat`s autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.

Kolejne demo zmiany rozmiaru, pokazujące „fałszywą” ramkę:

Zobacz
obraz ramki z dopasowanym piórem w łatwy sposób przez ShopTalk Show (@shoptalkshow)
na CodePen.

Oto kolejne zabawne demo z pokazem hamburgerów background-repeat: round;.

Związane z

  • załącznik w tle
  • background-clip
  • kolor tła
  • zdjęcie w tle
  • pochodzenie tła
  • pozycja tła
  • background-size

Zasoby

  • Specyfikacja CSS3
  • MDN

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Składnia wielu wartości rozdzielanych przecinkami jest obsługiwana tylko w przeglądarkach Firefox 3.6+ i IE 9+. Składnia z dwiema wartościami do kontrolowania rozdzielonych wartości poziomych i pionowych jest obsługiwana tylko w przeglądarkach Firefox 13+ i IE 9+. roundI spacesłowa kluczowe są tylko Firefox i IE 9+ 49+.