Warum dehnt sich mein CSS3-Verlauf nicht so aus, dass er das gesamte Browserfenster ausfüllt?

Strecken von Farbverläufen in CSS3

Bei der Angabe eines CSS3-Farbverlaufshintergrunds für den Element wird der Farbverlauf nicht so ausgedehnt, dass er das gesamte Browserfenster ausfüllt. Stattdessen wiederholt es sich, bis der Inhaltsbereich gefüllt ist. Dieses Verhalten kann frustrierend sein, wenn der Farbverlauf über den Inhalt hinausgehen soll.

Lösung

Um den Farbverlauf so zu strecken, dass er das Browserfenster ausfüllt, wenden Sie das folgende CSS an :

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Diese Stile erreichen Folgendes:

• html { height: 100 %; }: Legt die Höhe des fest. element auf 100 %, um sicherzustellen, dass der Hintergrund mit Farbverlauf über den sichtbaren Bereich hinausgehen kann.
• body { height: 100 %; Rand: 0; }: Legt die Höhe des fest. Element auf 100 % und entfernt alle Ränder, um mögliche Überschneidungen zwischen dem Farbverlauf und dem Inhalt zu vermeiden.
• background-repeat: no-repeat;: Verhindert, dass sich der Farbverlauf wiederholt, nachdem der Inhaltsbereich gefüllt wurde.
• background-attachment: Fixed;: Stellt sicher, dass der Farbverlauf beim Bewegen der Bildlaufleiste an seinem Platz bleibt und so einen kontinuierlichen Farbverlaufseffekt im gesamten Bild erzeugt Fenster.

Das obige ist der detaillierte Inhalt vonWarum dehnt sich mein CSS3-Verlauf nicht so aus, dass er das gesamte Browserfenster ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!