Reaktion js css class background image nicht sichtbar

8

Ich habe eine Klasse in der react-Komponente hinzugefügt.
CSS-Datei:

%Vor%

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?

    
Mahesh Haldar 08.02.2016, 20:00
quelle

5 Antworten

1

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.

    
sighrobot 03.11.2016 00:56
quelle
0

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.

%Vor%

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.

    
Yuval 08.04.2017 11:27
quelle
0
%Vor%

Nicht sicher, um welches Bild es sich handelt, aber das würde das Bild so skalieren, dass es der aktuellen div-Höhe entspricht, die durch den Text definiert wird.

    
dmartins 09.09.2017 03:56
quelle
0

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

%Vor%

Dies sollte funktionieren, wie ich es versucht habe.

    
hajorg 09.09.2017 04:31
quelle
0

Platzieren Sie den IMG-Ordner im öffentlichen Ordner

%Vor%

oder

%Vor%     
Lenny Castillo 04.10.2017 16:16
quelle

Tags und Links