Hintergrundrepeat (CSS-Eigenschaft)

Beschreibung

Die Eigenschaft mit Hintergrundregelung steuert, ob ein Hintergrundbild wiederholt wird (gekachelt), und wenn sie wiederholt wird, definiert die Eigenschaft entlang der der angegebenen Achsen (x, y oder beides). Das Bild soll wiederholt werden.

standardmäßig wird ein Hintergrundbild sowohl in vertikalen als auch in horizontalen Achsen wiederholt und in beide Richtungen wiederholt. Wir verwenden die Eigenschaft mit Hintergrund-Wiederholungen, um die Achse anzugeben, auf der ein Bild wiederholt werden sollte.

Wenn ein Hintergrundbild wiederholt wird, wird es zuerst gemäß der Eigenschaft von Hintergrundpositionen platziert und beginnt dann von diesem Punkt in beide Richtungen zu wiederholen. Zum Beispiel wird ein Hintergrundbild, das in einer Hintergrundposition des Mittelzentrums (der Mitte des Elements) platziert ist und der einen Hintergrundwert der Wiederholung aufweist, in beide Richtungen entlang der X- und Y-Achsen wiederholt-dh nach oben und unten, beginnend von der Mitte.

Der Hintergrund eines Elements ist der Bereich, der durch die Breite und die Höhe dieses Elements bedeckt ist (ob diese Dimensionen explizit eingestellt werden oder der Inhalt sie diktiert); Es umfasst auch den Bereich, der von Polsterung und Grenzen bedeckt ist. Eine Hintergrundfarbe (oder ein Hintergrundbild), das auf ein Element angewendet wird, erscheint unter dem Vordergrundgehalt dieses Elements, und der Bereich, der von den Polsterung und den Grenzeigenschaften für das Element abgedeckt wird. Dieser Abdeckungsbereich ist offensichtlich, wenn ein Element transparente (oder gepunktete oder gestrichelte) Grenzen aufweist und der Hintergrund unter den Grenzen (oder zwischen den Punkten) zu sehen ist. Beachten Sie, dass Internet Explorer -Versionen bis und 6 transparente Grenzen nicht unterstützen.

Ein Bereich des fraglichen Elements muss sichtbar sein, wenn das Hintergrundbild durchlaufen soll. Wenn das Element keine intrinsische Höhe hat (entweder wie durch seinen Inhalt oder durch seine Dimensionen definiert), ist der Hintergrund nicht sichtbar. Wenn ein Element nur schwebende Kinder enthält, die nicht gelöscht wurden - siehe klarer -, wird kein Hintergrund angezeigt, da die Höhe des Elements Null ist.

Die Kacheln und Positionierung des Hintergrundbildes auf Inline-Elementen ist in der CSS2.1-Spezifikation nicht definiert, kann jedoch in zukünftigen Versionen behandelt werden.

Beispiel

Diese Stilregel verursacht ein Hintergrundbild, das dem Element mit iD "Beispiel" zugewiesen ist, um entlang der x Achse zu wiederholen:

#example{
  background-repeat: repeat-x;
}

Wert

wiederholen

Die Wertschöpfung stellt sicher, dass das Hintergrundbild in beide Richtungen wiederholt wird (dh links und rechts und nach oben und unten) und entlang beiden Achsen, bis der Hintergrund des Elements vollständig abgedeckt ist.

repep-x

Der Wert Repeat-X stellt sicher, dass das Hintergrundbild nur entlang der x -Axis (dh die horizontale Achse in beide Richtungen-Links und rechts) wiederholt wird, bis der Hintergrund des Elements vollständig entlang dieser Achse bedeckt ist.

wiederholen y

Der Wert Repeat-y stellt sicher, dass das Hintergrundbild nur entlang der y -Axis (dh die vertikale Achse in beide Richtungen-UP und Down) wiederholt wird, bis der Hintergrund des Elements vollständig entlang dieser Achse abgedeckt ist.

no-repeat

Der Wert No-Repeat stellt sicher, dass das Hintergrundbild in keiner Richtung wiederholt wird und dass nur eine einzelne Instanz des Bildes an den von der Hintergrundposition angegebenen Koordinaten platziert wird.

Wenn keine Hintergrundposition angegeben wurde, Das Bild wird an der Standardposition des Elements (0,0) des Elements platziert.

häufig gestellte Fragen (FAQs) zu CSS-Hintergrund-Repeat-Eigenschaft

Was ist der Unterschied zwischen "Repeat-X" und "Repeat-Y" in der CSS-Hintergrund-Repeat-Eigenschaft? Wenn "Repeat-X" verwendet wird, wird das Hintergrundbild nur horizontal wiederholt, wodurch ein kontinuierliches Muster von links nach rechts erstellt wird. Andererseits wird das Hintergrundbild nur vertikal wiederholt, wenn „Wiederholung y“ verwendet wird, und erzeugt ein kontinuierliches Muster von oben nach unten. Diese Eigenschaften sind nützlich, wenn Sie die Richtung der Wiederholung des Hintergrundbildes steuern möchten. Wenn dieser Wert festgelegt ist, wird das Hintergrundbild an der von der Eigenschaft Hintergrundposition angegebenen Position platziert und wiederholt oder fliesen. Dies ist besonders nützlich, wenn Sie ein einzelnes Bild haben, das Sie als Hintergrund ohne Wiederholung verwenden möchten. Dies ist besonders nützlich, wenn Sie mit mehreren Hintergrundbildern arbeiten. Sie können einen anderen Wiederholungswert für jedes Hintergrundbild angeben, indem Sie jeden Wert mit einem Komma trennen. Der erste Wert entspricht dem ersten Hintergrundbild, dem zweiten Wert für das zweite Bild und so weiter.

Wie funktioniert der Wert "Space" in der CSS-Hintergrund-Repeat-Eigenschaft? Die Bilder sind gleichmäßig verteilt, und die ersten und letzten Bilder berühren die Kante des Elements. Wenn der verfügbare Platz für ein weiteres Bild nicht ausreicht, werden die Bilder zu einer Anpassung geändert. Dies kann nützlich sein, wenn Sie einen konsistenten Raum zwischen jeder Wiederholung des Hintergrundbildes beibehalten möchten. Das Bild wird so geändert, dass es innerhalb des Elements eine ganze Reihe von Male wiederholt werden kann. Dies kann nützlich sein, wenn Sie sicherstellen möchten, dass das gesamte Hintergrundbild ohne Ausschneiden sichtbar ist. Dies bedeutet, dass der Wiederholungswert des Hintergrundbildes des Elements dem von seinem übergeordneten Element übereinstimmt. Bei Verwendung mit einem Gradienten wiederholt die Eigenschaft mit Hintergrundregelung das Gradientenmuster entsprechend dem angegebenen Wert. Dies kann nützlich sein, wenn Sie einen sich wiederholenden Gradienteneffekt erstellen möchten. Dies bedeutet, dass das Hintergrundbild sowohl horizontal als auch vertikal wiederholt. Dies ist das Standardverhalten der Eigenschaft mit Hintergrundrepeat. Dies bedeutet, dass das Hintergrundbild sowohl horizontal als auch vertikal wiederholt.

Kann ich die Wiederholung des Hintergrundbildes nur in einer Richtung steuern? Sie können den Wert "Repeat-X" verwenden, um das Bild horizontal zu wiederholen, oder den Wert "Wiederholt-y", um das Bild vertikal zu wiederholen. Dies kann nützlich sein, wenn Sie mit dem Hintergrundbild ein horizontales oder vertikales Muster erstellen möchten.

Das obige ist der detaillierte Inhalt vonHintergrundrepeat (CSS-Eigenschaft). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!