Zusammenfassung der Verwendung des Hintergrundpositionsattributs in CSS

Das Attribut

background ist eines der häufigsten Attribute in CSS. Um CSS-Ausschnitte zu implementieren, müssen Sie nur ein Attribut verwenden: background-position. Hintergrundposition wird verwendet, um die Position des Hintergrundbilds des Elements zu steuern. Der Trick besteht darin, dass Sie tatsächlich die Position der oberen linken Ecke des Bildes relativ zur oberen linken Ecke des Elements angeben. Es werden drei Werte akzeptiert: Schlüsselwörter wie oben, rechts, unten, links und in der Mitte; Längenwerte wie px, em, rem usw.; >hundert Punkte%. Der folgende Inhalt befasst sich mit der Verwendung des Hintergrundpositionsattributs.

Zunächst können Sie kostenlose Kurse im Zusammenhang mit der chinesischen PHP-Website lernen

1 „CSS 0-Grundlagen“

CSS-Hintergrund Kapitelkurs im „Einführungs-Tutorial“

2. Sehen Sie sich den Videokurs

Hintergrund und Rand

in „Dark Horse Programmer CSS Video Tutorial“ an "

Verwendung des Attributs „Hintergrundposition“1.

CSS-Hintergrund- Positionsattribut

Die Eigenschaft „Hintergrundposition“ legt die Startposition des Hintergrundbilds fest.

Dieses Attribut legt die Position des Hintergrundbilds fest (definiert durch „Hintergrundbild“). Wenn das Hintergrundbild wiederholt werden soll, beginnt es an dieser Stelle. Tipp: Sie müssen die Eigenschaft „background-attachment“ auf „fixed“ setzen, um sicherzustellen, dass diese Eigenschaft in Firefox und Opera ordnungsgemäß funktioniert.

2.

Hintergrundpositionsprozentsatzprinzip

Für Hintergrundgröße: 100 % automatisch bedeutet dies, dass die Breite des Hintergrundbilds der Elementbreite * 100 % entspricht Die Höhe wird proportional skaliert. Weitere Informationen finden Sie im CSS3-Hintergrund.

Es ist natürlich zu glauben, dass der Prozentsatz der Hintergrundposition auf der Grundlage der Breite des übergeordneten Elements berechnet wird, aber die Hintergrundposition hat in Wirklichkeit keine eigenen Prinzipien. 3.

Die Verwendung von Hintergrundposition in CSS

Der erste der beiden Werte ist die horizontale Positionierung, die wir x-Achsen-Positionierung nennen . Letzterer Wert ist die Längspositionierung, die wir Y-Achsenpositionierung nennen.

Wenn es nur einen Wert gibt, ist der Standardwert die Richtung der x-Achse

Zu diesem Zeitpunkt ist die Ausrichtung der y-Achse standardmäßig nach oben und unten ausgerichtet, also in der Mitte.

4. Css verwendet das Hintergrundpositionsattribut, um den Code des Sprite-Bildes zu vervollständigen Das Sprite-Bild ist CSS Sprite, und einige Leute nennen es Das CSS-Sprite. Eine CSS-Bildzusammenführungstechnologie besteht darin, mehrere kleine Symbole zu einem Bild zusammenzuführen und dann den anzuzeigenden Teil mithilfe der CSS-Hintergrundposition anzuzeigen.

Es kann die Anzahl der Anfragen an den Server beim Laden von Webseitenbildern reduzieren, die Seitenladegeschwindigkeit verbessern und das Problem lösen, dass IE6 weiß blinkt, wenn die Maus darüber bewegt wird. 5.

Was Sie nicht über die Hintergrundposition wissen

Wir wissen, dass die Hintergrundposition zur Angabe des Versatzwerts des Hintergrunds verwendet wird Bild, das eine Das Bild beginnt an einer bestimmten Position. CSS Sprites erfüllt die Erwartung, HTTP-Anforderungen zusammenzuführen, indem es mehrere kleine Bilder zu einem großen Bild zusammenfügt und dann mithilfe der Hintergrundposition den anzuzeigenden Bereich angibt.

Verwandte Fragen und Antworten

1. Hintergrundposition Es wird einen Rand geben, der nicht sein kann nach der Aufnahme des Bildes entfernt

2.Verwirrung über die Verwendung von Hintergrundposition.

3. Fragen zum Prozentsatz der Hintergrundposition?

[Verwandte Empfehlungen]

1. Kostenlose Tutorials auf der chinesischen PHP-Website: "CSS Online Manual"

2 Website-Video-Tutorial: „Erlernen Sie das HTML-Video-Tutorial auf Knopfdruck“

3. Kostenloses Video-Tutorial auf der chinesischen PHP-Website: „php.cn Dugu Jiujian (2) – CSS-Video Tutorial“

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des Hintergrundpositionsattributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!