Hintergrundbild in CSS
In CSS die Hintergrundbild Eigenschaft wird verwendet, um das Hintergrundbild für einzelne oder mehrere Elemente festzulegen. In CSS können mehrere Eigenschaften verwendet werden, um das Hintergrundbild festzulegen. Einige häufig verwendete Eigenschaften sind unten angegeben:
- Hintergrundgröße Eigenschaft wird verwendet, um die Größe des Hintergrundbildes anzupassen.
- Hintergrund Wiederholung Eigenschaft ermöglicht oder deaktiviert die Wiederholung eines Bildes.
- Hintergrundposition Gibt die Position eines Bildes an.
Diese Beschreibung bietet einen umfassenden Überblick über die Eigenschaftseigenschaft im Hintergrund, in der Sie lernen, wie Sie einem einzelnen Element oder dem ganzen Körper ein Hintergrundbild hinzufügen.
So fügen Sie ein einzelnes Hintergrundbild in CSS hinzu
Die Hintergrundbildeigenschaft wird hauptsächlich mit dem Körperelement verwendet, kann jedoch zu einem bestimmten Element wie Absätzen, Überschriften, Div usw. hinzugefügt werden. Um das Hintergrundbild hinzuzufügen.
Beispiel 1: Das untergegebene Stück Code einbettet ein Hintergrundbild in den ganzen Körper:
Hintergrundbild
Willkommen bei LinuxHint.com
Es wird die folgende Ausgabe angezeigt:
Im oben gegebenen Beispiel wurde Bild in demselben Ordner mit HTML-Datei so in der Datei platziert URL Es nimmt nur den Bildnamen mit seiner Erweiterung auf, wie im folgenden Snippet gezeigt:
Lassen Sie uns nun das Bild in einen anderen Ordner verschieben lassen "Bilder":
Wenn das Bild nicht im selben Verzeichnis vorhanden ist, müssen wir den vollständigen Pfad des Bildes angeben, sonst würden wir nicht die gewünschten Ergebnisse erhalten.
Beispiel 2: Anstatt den vollständigen Pfad bereitzustellen, versucht dieses Beispiel, nur mit seinem Namen auf das Bild zugreifen zu können:
Hintergrundbild
Willkommen bei LinuxHint.com
Das Bild wird in die Bilder platziert. Aus der Ausgabe wäre klar, dass Sie, wenn Sie nicht den genauen Pfad angeben würden, nicht die gewünschten Ergebnisse erhalten würden, wie unten gezeigt:
Beispiel 2: Betrachten wir ein Beispiel, in dem das Bild im Ordner im Bilder vorhanden ist, während die HTML-Datei im Hintergrund-Image-Ordner vorhanden ist. In einem solchen Fall geben wir den vollständigen Pfad des Bildes an, wie im folgenden Snippet gezeigt:
Hintergrundbild
Willkommen bei LinuxHint.com
In der URL kommt zuerst zwei Punkte "..." Diese Staaten bewegen ein Verzeichnis zurück und gehen dann zum "Bilder" Verzeichnis, in dem das Bild platziert ist und am Ende Bildname mit seiner Erweiterung wie JGEG, PNG usw. geliefert wird. Jetzt generiert dieses Programm die richtige Ausgabe mit Hintergrundbild, wie unten gezeigt:
In ähnlicher Weise kann das Hintergrundbild mit jedem Element wie eingebettet werden
,
, usw.
So fügen Sie mehrere Hintergrundbilder in CSS hinzu
In CSS können das gleiche Element zu mehreren Hintergrundbildern hinzugefügt werden, indem mehrere URLs bereitgestellt werden.
Beispiel
Der untergegebene Code fügt das Körperelement mehrere Bilder hinzu. Darüber hinaus werden einige weitere Eigenschaften wie Hintergrund-Repeat, Hintergrundgröße usw. verwendet. Wie nachfolgend dargestellt:
Hintergrundbild
Willkommen bei LinuxHint.com
Der obige Code wird verwendet
- Farbeigenschaft, um die goldene Farbe für den Text festzulegen,
- Hintergrundbild fügte zwei Bilder hinzu,
- Hintergrundgröße setzen Sie die Größe des Bildes auf 600px,
- Hintergrundposition, um die Position des Bildes auf die Mitte auszurichten,
- Und schließlich nimmt der Hintergrund-Wiederholungsvermögen „No-Repeat“ ein, was bedeutet, dass jedes Bild nur einmal angezeigt wird.
Infolgedessen erzeugt es die folgende Ausgabe:
Aus der Ausgabe können Sie deutlich sehen, dass das Blau.JPG -Bild steht hinter der LinuxHint.JPEG -Bild, was bedeutet, dass die URL, die Sie zuerst schreiben, oben angezeigt wird, während das zweite Bild auf der Rückseite/hinten angezeigt wird.
Abschluss
Hintergrundbild Eigenschaft legt das Hintergrundbild für einzelne oder mehrere Elemente fest. Um ein Hintergrundbild zu implementieren, geben Sie einfach die URL des Bildes in der Hintergrund-Image-Eigenschaft an.
Dieser Artikel enthielt einen detaillierten Überblick über die Eigenschaft im Hintergrundbild. Zunächst erklärt es, wie ein einzelnes Hintergrundbild in CSS hinzugefügt wird. Anschließend leitete dieses Schreiben, wie man mehr als ein Hintergrundbilder für ein Element festlegt.