Detaillierte Erklärung zur Einstellung des Hintergrundbild-Attributs in HTML

Bei Bildern denken wir zuerst an das Hintergrundbild. Denn viele unserer Dekorationen werden mit Hintergrundbildern realisiert. Beginnen wir in diesem Fall mit der CSS-Steuerung von Hintergrundbildern.

Definition und Verwendung

Die Eigenschaft „Hintergrundbild“ legt ein Hintergrundbild für ein Element fest.

Der Hintergrund eines Elements nimmt die gesamte Größe des Elements ein, einschließlich Polsterung und Rahmen, jedoch ohne Ränder.

Standardmäßig wird ein Hintergrundbild in der oberen linken Ecke eines Elements positioniert und horizontal und vertikal wiederholt.

1.CSS steuert Hintergrundbilder:

Wenn wir mit dem Design einer Webseite beginnen, denken wir möglicherweise nicht allzu viel über das Hintergrundbild nach, da wir meistens nur die Hintergrundfarbe entwerfen müssen. Der Grund ist ganz einfach: Wie die Vordergrundmusik hat sie einen gewissen Einfluss auf die Geschwindigkeit, mit der die Webseite geöffnet wird. Für allgemeine persönliche Websites oder persönliche Blogs ist es jedoch natürlich unverzichtbar, die eigene Persönlichkeit zu zeigen. Natürlich ist nichts zu perfekt. Es gibt Vor- und Nachteile. Das heißt, wenn das Bild nicht verfügbar ist, aber CSS verfügbar ist, wird der Ersatzinhalt nicht angezeigt. Daher wird nicht empfohlen, CSS-Hintergrundbilder in Navigationsschaltflächentexten oder ähnlichen Situationen zu verwenden.
Es gibt viele CSS-Eigenschaften zur Steuerung von Hintergrundbildern und die meisten davon können verwendet werden, solange sie sich auf Bilder beziehen.

(1) Hintergrundbilder importieren:

Natürlich sind jedem die Begriffe „Hintergrund“ und „Hintergrundbild“ am geläufigsten.
Der Code zum Entwerfen eines Hintergrundbilds für eine Webseite lautet:

Körper {Hintergrund:URL("d:\images\04.jpg")}

oder

Körper {Hintergrundbild:URL("d:\images\04.jpg")}
Auf diese Weise können wir das Bild, das wir als Hintergrund verwenden möchten, in die Webseite importieren.

(2) So zeigen Sie das Hintergrundbild an:
Natürlich können Sie mit dem obigen Code allein nicht den gewünschten Effekt erzielen. Denn wenn das Bild klein ist, wird es gekachelt. Wenn es groß ist, wird zur Anzeige eine Bildlaufleiste eingeblendet, was nicht gut ist. Daher müssen wir mehr Anzeigesteuerung durchführen, d. h. Hintergrundwiederholung verwenden.

Es nimmt den Wert an:

Wiederholung: Der Standardwert. Hintergrundbildkacheln in vertikaler und horizontaler Richtung
no-repeat: Das Hintergrundbild wird nicht gekachelt
repeat-x : Das Hintergrundbild wird nur horizontal gekachelt
repeat-y : Das Hintergrundbild wird nur vertikal gekachelt

Den Code dürfte meiner Meinung nach jeder kennen, der sich ein wenig mit CSS auskennt. Er lautet wie folgt:
body {background:url("d:\images\04.jpg");Hintergrundwiederholung:keine Wiederholung}
In diesem Fall wird es in der Originalbildgröße angezeigt.

(3) Steuerung der Hintergrundbildgröße:

Die Frage ist jedoch: Was passiert, wenn das Bild zu groß ist? Für eine gute Webseite ist es am besten, keine zu großen Bilder zu verwenden. Die Gründe wurden oben erwähnt, da dies die Geschwindigkeit beim Öffnen der Webseite beeinträchtigt. Zur Verarbeitung verwenden wir besser PS oder FireWorks. Aber da ich es gerade erwähne, können wir zur Steuerung der Bildgröße auch gleich CSS verwenden.
Ich denke, viele Leute werden ganz selbstverständlich den folgenden Code verwenden:

Oh, das ist eine gute Idee, aber unterstützt Ihr Browser das? Ich denke, IE oder FF werden definitiv so tun, als ob sie es nicht sehen würden. Sie fragen sich vielleicht, ob der von mir entworfene Forumstil umsetzbar war? Ich denke, wenn es sich nur um den obigen Code handelt, ist es unmöglich, das Bild zu steuern, da dieser nur die Größe des KÖRPERS steuert. Das ist natürlich außer Kontrolle geraten. Wenn es sich um ein anderes ID-Tag handelt, kann meiner Meinung nach die Größe des Tags gesteuert werden. Haha, natürlich ist es nicht die Größe des Bildes.
Ehrlich gesagt stört dieses Problem nicht nur Sie, sondern auch mich. Weil es sich lediglich um einen Eigenschaftswert handelt und nicht um ein reales Objekt. Wenn Sie daran denken, CSS zur Steuerung zu verwenden, teilen Sie mir dies bitte mit.

Ergänzung: Am 10. September veröffentlichte das W3C einen Artikel mit dem Titel „CSS Backgrounds and Borders Module Level 3“, der dem CSS-Hintergrund mehrere Eigenschaften hinzufügte, die wir noch nie zuvor gesehen haben:

Hintergrund-Clip:
Hintergrundherkunft:
Hintergrundgröße: Hintergrundgröße.
Hintergrundunterbrechung:

Obwohl diese Attribute vorhanden sind, gibt es derzeit keine Browser, die sie unterstützen. Es ist so beunruhigend.

(4) Steuerung der Hintergrundbildposition:

Ich habe das Hintergrundbild importiert, aber seine Position ist wirklich inakzeptabel. Weil die Standardeinstellung die Ausrichtung oben links ist. Aber wir möchten es nicht so platzieren. Was sollen wir also tun? Keine Sorge, der spannende Moment kommt bald. Jetzt lernen wir background-position, background-position-x und background-position-y kennen.

a. Grundlegende Syntax:

Hintergrundposition: Länge || Länge
Hintergrundposition : Position || Position
Hintergrundposition-x: Länge | links | Mitte | rechts
Hintergrundposition-y: Länge | oben | Mitte | unten

b. Syntaxwert:

Länge: Prozentsatz | Ein Längenwert bestehend aus einer Gleitkommazahl und einer Einheitenkennung.
Position: oben | Mitte | unten | links | Mitte | rechts

c. Beispiel:

body { Hintergrundbild: URL("d:\images\04.jpg"); Hintergrundposition: 50 % 50 %; Hintergrundwiederholung: keine Wiederholung; }
body { Hintergrundbild: URL("d:\images\04.jpg"); Hintergrundposition-x: 50%; Hintergrundwiederholung:keine Wiederholung; }
body { Hintergrundbild: URL("d:\images\04.jpg"); Hintergrundposition-y: 50%; Hintergrundwiederholung:keine Wiederholung; }

Für die Werte Länge | Oben | Mitte | Unten schreibe ich nur die folgenden drei Beispiele.

body { Hintergrundbild: URL("d:\images\04.jpg"); Hintergrundposition: oben rechts; Hintergrundwiederholung: keine Wiederholung; }
body { Hintergrundbild: URL("d:\images\04.jpg"); Hintergrundposition: 50 % Mitte; Hintergrundwiederholung: keine Wiederholung; }
body { Hintergrundbild: URL("d:\images\04.jpg"); Hintergrundposition: 60px Mitte; Hintergrundwiederholung: keine Wiederholung; }

Nachdem Sie so viele Beispiele gegeben haben, denke ich, dass Sie ein gewisses Verständnis von Positionierung haben.

(5) Transparenzeinstellungen für Hintergrundbilder:

Manchmal möchten wir das Bild immer auf transparent setzen.

(6) Mehrere Hintergrundbilder festlegen:

Ich habe die Einstellung mehrerer Hintergrundbilder in „Beyond CSS: The Essence of Web Design Art“ gesehen. Allerdings tut es mir sehr leid, denn derzeit gibt es zu wenige Browser, die mehrere Hintergrundbilder in einem Tab unterstützen, und der einzige, den ich kenne, ist Apple Safari. Sie fragen sich vielleicht, wie das möglich ist? Nachdem Sie sich dieses Beispiel angesehen haben, werden Sie wahrscheinlich überrascht sein: „Oh mein Gott, vor CSS3 konnte man für jedes Element nur ein Bild verwenden.“ Wenn Sie es studieren möchten, installieren Sie schnell einen SAFARI-Browser. Ich bin überzeugt, dass dies für mich der Weg nach vorne ist. Kurz gesagt: Wer über eine bessere Fähigkeit zur Interpretation von CSS verfügt, wird den Entwicklungstrend vorgeben, und wer über perfekte WEB-Standards verfügt, wird der Star des Browsers von morgen sein.

Der Code lautet wie folgt: