HTML-CSS-Hintergrundbild nicht angezeigt
CSS bietet viele Styling -Eigenschaften für HTML -Elemente. Insbesondere ist das Hinzufügen von Hintergrundbildern mit CSS eine der wichtigsten Designaufgaben. Die Arbeit mit Hintergrundbildern kann jedoch manchmal eine Herausforderung sein. Dies liegt daran, dass mehrere andere Faktoren verhindern können, dass das Hintergrundbild angezeigt wird.
Dieser Beitrag wird Folgendes abdecken:
- So stellen Sie die Bild -URL richtig ein?
- So setzen Sie die übergeordnete Elementelementgröße des Bildes?
- So verknüpfen Sie die CSS -Datei ordnungsgemäß?
- So setzen Sie CSS “Hintergrund" Eigenschaften?
So stellen Sie die Bild -URL richtig ein?
Das Hintergrundbild lädt den Browser nicht, wenn die Bild -URL falsch ist. Analysieren Sie das unten diskutierte Beispiel, um das Problem mit der relevanten Lösung kennenzulernen.
Beispiel
In HTML fügen Sie eine "hinzu""Element und zuweisen Sie es der Klasse"Banner-Img”:
Stil „Banner-Img“ -Klasse
.Banner-Img
Breite: 400px;
Höhe: 300px;
Hintergrund-Image: URL (/IMG/Hellbulbs-5488573_1920.JPG);
Hintergrundgröße: Cover;
Nach dem angegebenen Code -Snippet:
- “Breite”Bestimmt die Breite des Elements.
- “Höhe”Passt die Höhe des Elements an.
- “HintergrundbildGibt die URL des Bildes an.
- “Hintergrundgröße"Mit dem Wert"Abdeckung”Passt das Bild in den gesamten Behälter.
Ausgang
Wenn Sie die URL des falschen Bildes hinzufügen, wie im folgenden Codeblock erwähnt, tritt der 404 -Fehler auf:
.Banner-Img
Breite: 400px;
Höhe: 300px;
Hintergrund-Image: URL (/IMG/BULBS-5488573_1920.JPG);
Hintergrundgröße: Cover;
Klicken Sie mit der rechten Maustaste auf die Webseite und wählen Sie das aus “prüfenDie Option "Option" Das Werkzeugfenster des Entwicklers zeigt den Status der Ressource an:
So setzen Sie die übergeordnete Elementelementgröße des Bildes?
Manchmal kann das Bild auf der Webseite nicht geladen werden, wenn die Größe des übergeordneten Elements nicht festgelegt ist.
Analysieren Sie das folgende Beispiel unten.
Beispiel
Füge hinzu ein ""Element und zuweisen Sie es der Klasse"Banner”:
.Inhalt
Hintergrund-Image: URL (/IMG/Hellbulbs-5488573_1920.JPG);
Hintergrundgröße: Cover;
Breite: 400px;
Höhe: 500px;
Hier:
- “Hintergrundbild”Legt die URL des Hintergrundbildes fest.
- “Hintergrundgröße”Legt die Größe des Bildes fest. Genauer gesagt das “AbdeckungDer Wert deckt den gesamten Container ab.
Ausgang
So verknüpfen Sie eine CSS -Datei ordnungsgemäß?
Wenn Sie das externe Stilblatt verwenden, stellen Sie sicher, dass das „das“Das Element muss ordnungsgemäß angegeben werden. Der Dateiname muss in der “korrekt angegeben seinhref”Attribut:
So setzen Sie CSS -Hintergrundeigenschaften?
Das CSS “HintergrundEigenschaften müssen ordnungsgemäß für die Elemente angegeben werden:
.Banner-Img
Rand: Auto;
Breite: 400px;
Höhe: 250px;
Hintergrund-Image: URL (/IMG/Hellbulbs-5488573_1920.JPG);
Hintergrundgröße: Cover;
Hintergrundposition: Zentrum;
Hintergrundrepeat: No-Repeat;
Hier:
- “HintergrundbildGibt die URL des Hintergrundbildes an.
- “Hintergrundgröße”Legt die Größe des Hintergrundbildes fest.
- “Hintergrundposition”Passt die Position des Hintergrundbildes an.
- “Hintergrund WiederholungBestimmt, ob das Bild wiederholt wird oder nicht.
Das CSS “Hintergrund”Eigenschaft kann als Kurzeigeneignis wie folgt angegeben werden:
Hintergrund: URL (/IMG/Hellbulbs-5488573_1920.JPG) Center/Cover No-Repeat;
Notiz: Die Hintergrundposition und die Hintergrundgröße müssen durch die „getrennt werden“/Slash, wie im obigen Codeblock erwähnt. Andernfalls wird das Bild nicht angezeigt.
Überprüfen Sie, um die Seite zu überprüfen und das Entwickler -Werkzeugfenster zu beobachten. Sie sehen Folgendes:
Dies sind die Gründe und Korrekturen für das CSS -Hintergrundbild, das kein Problem anzeigt.
Abschluss
Um das Hintergrundbild richtig zu laden, müssen viele Faktoren berücksichtigt werden. Dazu gehört die richtige Einstellung der Bild -URL, das Anpassen der Breite und Höhe des übergeordneten Elements, korrekt, einschließlich der Verbindung des externen Stilblatts und Angabe des CSS ““Hintergrund”Eigenschaften richtig. Dieser Beitrag hat die Fixes für die Hintergrundbilder erläutert, die kein Problem anzeigen.