Die Verwendung und Definition des CSS-Hintergrundanhangsattributs

Hintergrundanhang – Definieren Sie, wie sich das Hintergrundbild mit der Scroll-Achse bewegt

Werte: scroll | fest | Achsenhintergrundbild bewegt sich

behoben: Das Achsenhintergrundbild bewegt sich nicht, wenn die Seite scrollt

erben: Vererbt

Anfangswert: scrollen

Vererbung: Nein

Gilt für: Alle Elemente

Hintergrund: Hintergrund.Anhang: Anhang.

Beispiel

Der Hintergrund des Bildschirm Das Bild ist eine orangefarbene Linie. Während sich die Bildlaufachse bewegt, bleibt die visuelle Position der orangefarbenen Linie unverändert.

body 
{	
background-image:url('list-orange.png');	
background-attachment:fixed;	
background-repeat:repeat-x;	
background-position:center center;
}

Beispiel für eine CSS-Hintergrundanhangseigenschaft – Sie können versuchen, den CSS-Hintergrund zu bearbeiten -Beispiel für eine Anhangseigenschaft

Parallax Scrolling bezieht sich darauf, mehrschichtige Hintergründe mit unterschiedlichen Geschwindigkeiten zu bewegen, um einen dreidimensionalen Bewegungseffekt zu erzeugen und ein hervorragendes visuelles Erlebnis zu bieten. Als heißer Trend im Webdesign in diesem Jahr haben immer mehr Websites diese Technologie eingesetzt.

Wenn Sie es nicht verstehen, können Sie sich zunächst die Auswirkung bei eBay ansehen: http://www.ebay.com/new/

Tatsächlich ist es zu beheben Der Hintergrund wird verschoben und verhindert, dass er sich mit der Bildlaufachse bewegt. Der Container mit dem Hintergrund wird jedoch gescrollt, was zu einem visuellen Unterschied führt, der mit dem Wechseln von Szenen identisch zu sein scheint. (Lassen Sie diese Erklärung nicht zu verwirrend sein...)

Das Attribut, das die Hintergrund-Bildlaufmethode in CSS definiert, ist „background-attachment“

background-attachment – ​​definiert die Art und Weise des Hintergrundbilds bewegt sich mit der Scroll-Achse

Werte: scroll | fixiert

scroll: Standardwert.

Das Hintergrundbild

bewegt sich, während der Rest der Seite scrollt.

behoben: Das Hintergrundbild bewegt sich nicht, wenn der Rest der Seite gescrollt wird. inherit: Gibt an, dass die Einstellung des Attributs „background-attachment“ vom übergeordneten Element geerbt werden soll.

Anfangswert: scrollen

Vererbung: Nein

Gilt für: alle Elemente

Browserunterstützung:

Ich habe Getestet Chrome, Opera, Safari, Firefox und ie7-8 und sie funktionieren alle, was bedeutet, dass es unter IE6 nicht funktioniert~

Um dieses Attribut unter IE6 zu verwenden, müssen Sie einen Hintergrundanhang platzieren: im Körper fixiert Oder in HTML, das heißt, es ist in anderen Tags nutzlos. Der Effekt, den Sie im obigen W3C sehen können, liegt darin, dass es im Körper platziert wird.

Dies ist eine Demo, die ich selbst erstellt habe. Klicken Sie zum Herunterladen

Code:

Das obige ist der detaillierte Inhalt vonDie Verwendung und Definition des CSS-Hintergrundanhangsattributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!