Warum dehnt sich mein CSS3-Hintergrund mit Farbverlauf nicht auf die volle Fensterhöhe aus?

Problem mit der Dehnung des Hintergrunds mit Farbverlauf in CSS3

Problem:

Trotz Einstellung eines Hintergrunds mit Farbverlauf für Der Wenn Sie ein Element mithilfe von CSS3-Verläufen erstellen, bleibt die Verlaufshöhe auf der Höhe des Inhalts fixiert und wiederholt sich, um den verbleibenden Fensterraum auszufüllen. Dieses Verhalten tritt sowohl in WebKit- als auch in Gecko-Browsern auf.

Lösung:

Um zu erzwingen, dass sich der Farbverlauf auf die Höhe des Fensters ausdehnt, wenden Sie das folgende CSS an:

html {
    height: 100%;
}

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

Erklärung:

• HTML und Text Die Höhen werden auf 100 % gesetzt, wodurch sie gezwungen werden, die gesamte Fensterhöhe auszufüllen.
• margin: 0; am Körper entfernt alle unerwünschten Ränder.
• background-repeat: no-repeat; verhindert, dass sich der Farbverlauf wiederholt.
• Hintergrundanhang: behoben; legt die Position des Farbverlaufs fest und stellt sicher, dass er stationär bleibt, wenn die Größe des Fensters geändert wird.

Diese Lösung stellt sicher, dass sich der Farbverlauf vertikal ausdehnt, um die gesamte Fensterhöhe auszufüllen, ohne das Seitenlayout zu wiederholen oder zu stören.

Das obige ist der detaillierte Inhalt vonWarum dehnt sich mein CSS3-Hintergrund mit Farbverlauf nicht auf die volle Fensterhöhe aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!