Reaktion js css class background image nicht sichtbar
Ich habe eine Klasse in der react-Komponente hinzugefügt.
CSS-Datei:
Reagieren Render Methode:
%Vor%Der Browser zeigt den Rahmen an und lädt das Bild, aber das Bild ist nicht sichtbar.
Der Screenshot sieht wie folgt aus:
Kann mir jemand sagen, was ich falsch mache?
5 Antworten
Dies tritt höchstwahrscheinlich auf, weil für div.bg kein height angegeben ist. Aus diesem Grund passt sein height exakt zum Textinhalt.
Hintergrundbilder jeder Größe haben keinen Einfluss auf die Größe ihres übergeordneten Elements. Wenn es Ihr Ziel ist, das gesamte Bild sehen zu können, müssen Sie ein height für div.bg angeben, das der Höhe des Originalbildes entspricht.
Ihr .bg div hat momentan eine Größe von 0x0 px, deshalb wird das Bild nicht angezeigt. Geben Sie eine Breite und eine Höhe an, um das Bild zu sehen.
Zum Beispiel:
%Vor% Oder besser noch 100% , damit das gesamte Bild in das div passt.
Als Randnotiz: Stellen Sie sicher, dass Ihr Hintergrundbild nicht zu groß ist und viel Zeit zum Laden benötigt. Eine große Hintergrundbildgröße kann zu einer sehr schlechten Benutzererfahrung führen. Erwägen Sie die Verwendung eines PNG-Bildes, eines kleinen Bildes mit dem repeat -Attribut oder eines SVG.
Versuchen Sie, den Hintergrund in background-image zu ändern. Geben Sie der Klasse bg ebenfalls eine Höhe und eine Breite. Dann geben Sie schließlich background-size an, um sie zu verdecken. Ein Beispiel würde aussehen wie
Dies sollte funktionieren, wie ich es versucht habe.
Platzieren Sie den IMG-Ordner im öffentlichen Ordner
%Vor%oder
%Vor%Tags und Links javascript reactjs