CSS-Hintergrund Farbverlauf Problem wiederholen

7

Ich habe eine HTML-Seite, die Breite und Höhe erweitern muss, also muss man in der Lage sein, nach oben und unten und links und rechts zu blättern, aber ich kann nicht den CSS-Gradienten zu wiederholen-x und einen Volumenkörper hinterlassen Farbe nach unten.

Gestrippter Code:

%Vor%

Dies führt den Farbverlauf in eine Volltonfarbe (# 366fcd), wenn Sie nach unten scrollen, aber wenn Sie nach rechts scrollen, stoppt der Farbverlauf und Sie sehen dort auch die Volltonfarbe. Siehe Beispiel .

Wenn ich die Hintergrundfarbe entferne: # 366fcd; } aus dem Element html , dann wiederholt sich der Farbverlauf wie erwartet auf der X-Achse. Wenn Sie jedoch nach unten blättern, wird der Farbverlauf angehalten und Weiß angezeigt. Siehe Beispiel .

Ich weiß, dass ich immer auf ein Hintergrundbild zurückgreifen könnte, würde es aber vorziehen, dass das CSS funktioniert.

Oh ja, das ist in Chrome und FF auf OSX Lion getestet.

Anthony

    
littlecharva 15.09.2011, 07:35
quelle

2 Antworten

18

Alles was Sie brauchen, ist background-attachment . Mit dieser Eigenschaft können Sie den Hintergrund des Körpers korrigieren, während Ihr Körper die Bildschirmhöhe vollständig ausfüllt.

%Vor%

Sehen Sie sich mein Beispiel hier an Ссылка

Hier ist Ihr Beispiel behoben: Ссылка

Ich habe background-repeat -Eigenschaft entfernt und auch die Farben geändert, um mehr sichtbar zu sein.

Wenn Sie Ihren Hintergrund scrollen möchten, müssen Sie the background-attachment auf scroll setzen. Scrollen funktioniert nur, wenn Sie einen großen Inhalt haben. Im Beispiel dieses Beispiel habe ich das body-Tag height auf 3000px gesetzt.

    
Mohsen 15.09.2011, 07:51
quelle
2

Wende deine Gradienten auf das html-Tag an.

%Vor%

Getestet in FF6, Chrome 13 und Safari 5.

    
easwee 15.09.2011 08:26
quelle

Tags und Links