Die Hintergrundbilder haben einen großen Einfluss auf das Erscheinungsbild jeder Website. Wenn wir eine Webseite/Inhalte scrollen, was ist das Verhalten des Hintergrundbildes? Ob es sich auch mit Inhalten bewegen wird oder nicht.

Also! Standardmäßig scrolle das Hintergrundbild mit dem Inhalt. Die Eigenschaft zur Hintergrundabrechnung wird speziell verwendet, um die Reaktion des Hintergrundbildes zu bestimmen. Es entscheidet das Verhalten des Hintergrundbildes mit den folgenden Werten:

• Fest: Durch das Zuweisen des festen Wertes dem Hintergrundbild wird das Bild auf der Webseite behoben.
• scrollen: Mit dem Bildlaufwert kann ein Bild mit dem Inhalt scrollen.
• lokal: Der lokale Wert ermöglicht es einem Bild, mit dem Inhalt eines Elements zu scrollen.

Diese Beschreibung vermittelt ein detailliertes Verständnis der Hintergrund-Atachment-Eigenschaft in CSS. Für ein besseres Verständnis wird dieser Artikel einige Beispiele mit unterschiedlichen Hintergrundanschlüssen berücksichtigen.

Syntax

Der folgende Snippet beschreibt die Syntax der Hintergrund-Einbindung Eigenschaft

Hintergrund-Einbindung: Wert

Lassen Sie uns diskutieren, welche Werte Hintergrund-Atachment-Eigenschaft annehmen können.

fester Wert

Der "Fest" Wert legt das Bild auf eine bestimmte Position fest. Das Bild würde sich nicht mit dem Inhalt bewegen.

Beispiel

Der untergegebene Code erklärt, wie das festgelegt wird Fest Wert für die Hintergrund-Einbindung Eigenschaft

Html

Hintergrundbild: Behoben

Alle hier geschriebenen Inhalte!

CSS

Körper
Hintergrundbild: URL ("Cover.JPG ");
Hintergrundrepeat: No-Repeat;
Hintergrundposition: links oben;
Hintergrundantrieb: behoben;

Der obige Code generiert die folgende Ausgabe:

Die Ausgabe verdeutlicht, dass das Bild behoben bleibt.

Scrollwert

Der "scrollen" Wert ermöglicht es uns, das Bild mit dem Inhalt zu scrollen. Für ein besseres Verständnis betrachten Sie den folgenden Code:

Html

Hintergrundbild: Scrollen

Alle hier geschriebenen Inhalte!

CSS

Körper
Hintergrundbild: URL ("Cover.JPG ");
Hintergrundrepeat: No-Repeat;
Hintergrundposition: links oben;
Hintergrundanschluss: Scrollen;

Der obige Code erzeugt die folgende Ausgabe:

Lokaler Wert

Lokaler Wert bewegt das Bild mit dem Inhalt des Elements. Wenn Sie das Lokal im obigen Beispiel jedoch implementieren, sieht das Ergebnis mit dem Scrollwert genauso aus. Wie können wir also die lokalen und scrollen Werte unterscheiden?

Der Unterschied zwischen den lokalen und den Scroll -Werten kann in einem Szenario festgestellt werden, in dem auf einer Webseite mehrere scrollbare Bereiche vorhanden sind.

Beispiel

In diesem Beispiel wird der Code für den lokalen Wert für die multiplen scrollbaren Bereiche bereitgestellt.

Html

Hintergrundbild: lokal

Alle Inhalte kommen hierher

CSS

.Kasten

Breite: 500px;
Höhe: 500px;
Rand: 100px;
Grenze: 10px solide Schwarz;
Überlauf: Auto;
Hintergrundbild: URL ("Cover.JPG ");
Hintergrundrepeat: No-Repeat;
Hintergrundanschluss: lokal;

Die Ausgabe des oben angegebenen Codes ist wie folgt:

In der obigen Ausgabe befinden sich zwei Scrollstangen. Wenn wir eine Scroll -Bar bewegen, ich bin.e. Intern oder extern Das Bild bewegt sich mit dem Inhalt.

Verwenden Sie im obigen Code Scrollen anstelle von lokal und beobachten Sie den Unterschied.

CSS -Schriftrolle

Hintergrundanschluss: Scrollen;

Die folgende Ausgabe wird für den Bildlaufwert angezeigt:

Es gibt zwei Schriftrollenstangen. Wenn wir die Außenleiste scrollen, bewegen Sie sich mit dem Inhalt mit dem Inhalt. Und wenn wir scrollen, blieb das Innenstangebild festgelegt.

Abschluss

Die Eigenschaft im Hintergrund der Eingriffe gibt an, wie sich ein Hintergrundbild verhalten wird. Es braucht drei Werte dh dh. behoben, scrollen, lokal. "Fest" Um das Bild an einer bestimmten Position zu beheben, "scrollen" das Bild mit Inhalten zu verschieben und "lokal" Um das Bild mit dem Inhalt des Elements zu verschieben.

In diesem Artikel stellte ein detaillierter Überblick über die Immobilie des Hintergrunds vor. Darüber hinaus zeigte diese Beschreibung.