Hintergrundwiederholung - CSS-Tricks

Anonim

Wenn eine background-imageEigenschaft angegeben wird, definiert die background-repeatEigenschaft in CSS, ob (und wie) sie wiederholt wird. Hier ist ein Beispiel:

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

Dies sind die möglichen Werte für diese Eigenschaft (neben den üblichen Dingen wie inherit):

  • repeat: Kacheln Sie das Bild in beide Richtungen. Dies ist der Standardwert.
  • repeat-x: Kacheln Sie das Bild horizontal
  • repeat-y: Kacheln Sie das Bild vertikal
  • no-repeat: Kacheln Sie nicht, zeigen Sie das Bild nur einmal
  • space: Kacheln Sie das Bild in beide Richtungen. Schneiden Sie das Bild niemals zu, es sei denn, ein einzelnes Bild ist zu groß, um zu passen. Wenn mehrere Bilder passen, platzieren Sie sie so, dass Bilder immer die Ränder berühren.
  • round: Kacheln Sie das Bild in beide Richtungen. Schneiden Sie das Bild niemals zu, es sei denn, ein einzelnes Bild ist zu groß, um zu passen. Wenn mehrere Bilder in den verbleibenden Platz passen, zerquetschen oder strecken Sie sie, um den Raum zu füllen. Wenn weniger als eine halbe Bildbreite übrig ist, strecken Sie, wenn es mehr ist, strecken Sie.

Es gibt auch die Syntax mit zwei Werten:

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

Dies macht die einwertigen Syntaxen nur zu einer Abkürzung für die zweiwertige Syntax. Zum Beispiel roundist wirklich round round.

Sie können auch mehrere Werte durch Kommas trennen, wenn Sie mit mehreren Hintergründen arbeiten.

Demo

Siehe die
Hintergrundwiederholung des
Stifts durch CSS-Tricks (@ css-Tricks) auf CodePen.

Interaktive Demo zu Funktionsweise spaceund roundFunktionsweise im Vergleich zu repeat:

Siehe den Stift
Die verschiedenen "Hintergrundwiederholungen" von Chris Coyier (@chriscoyier)
auf CodePen.

Eine weitere Demo zur Größenänderung, die einen „falschen“ Rand zeigt:

Sehen Sie sich das mit einem Stift versehene
Randbild
auf einfache Weise von ShopTalk Show (@shoptalkshow) auf CodePen an.

Hier ist eine weitere lustige Demo, bei der Hamburger demonstrieren background-repeat: round;.

verbunden

  • Hintergrund-Anhang
  • Hintergrund-Clip
  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrundherkunft
  • Hintergrundposition
  • Hintergrundgröße

Ressourcen

  • CSS3 Spec
  • MDN

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Die durch Kommas getrennte Mehrwertsynta wird nur in Firefox 3.6+ und IE 9+ unterstützt. Die Zwei-Wert-Syntax zur Steuerung horizontaler und vertikaler Werte wird nur in Firefox 13+ und IE 9+ unterstützt. Die Schlüsselwörter roundund spacesind nur Firefox 49+ und IE 9+.