Hintergrundbild wird nicht angezeigt

Gestern habe ich ein HTML-Element erstellt und dieses Problem hat mich getroffen. Das Hintergrundbild des DIV zeigt nicht, und ich war neugierig, die Verbindung funktionierte gut.Hintergrundbild wird nicht angezeigt

Hier ist mein Code

<div id="floating-image-<?php echo $id; ?>" class="fl-<?php echo $id; ?>" style=" 
 
    background-image: url(https://images.pexels.com/photos/290470/pexels-photo-290470.jpeg?h=350&auto=compress&cs=tinysrgb); 
 
    margin-top: 20px; 
 
\t height: 200px; 
 
    width: 200px; 
 
    background-position: center center; 
 
\t background-repeat: no-repeat; 
 
\t transform: translateY(0px); 
 
    background-size: contain; 
 
\t position: relative; 
 
    margin-right: auto; 
 
\t margin-left: auto; 
 
    max-width: 80%; 
 
    display:block; 
 
    "></div>

EDIT ok, herausgegeben ich die dynamischen Codes und ersetzt sie mit einigen statischen Ausgang. Sorry für irreführend Another EDIT änderte ich das Bild und jetzt habe ich ein kleineres Bild verwende, aber immer noch zeigt es nicht

Quelle

2017-02-18 Anonymous

Was ist '$ image' und wie sieht Ihre Dateistruktur aus? Überprüfe deine Konsole, um zu sehen, ob du Fehler bekommst. Viel können wir hier nicht machen. – Santi

Haben Breite und Höhe 'px'? Wenn nicht, dann erstellen Sie ein div mit entweder keiner Breite, keiner Höhe oder beiden, und deshalb wird Ihr Hintergrundbild angezeigt, nur auf einem div, das nicht sichtbar ist (weil es Breite/Höhe ist 0) – Adam

@Santi Ich überprüfte meine Konsole, aber nichts war über das Bild –

Die Lösung wird nur von mir gelöst, da sie in einem Projekt enthalten ist.

Vielen Dank für Ihre Hilfe, und wenn ich die echte Lösung gefunden habe, werde ich es hier posten.

EDIT

Nun, ich fühle mich jetzt schlecht, über die verschwendete Stunde in meinem Leben.

Wie auch immer, ich fand die Lösung und es ging um die Animationen. Ich habe dieses Feature in meinem Thema erstellt, damit der Benutzer Animationen einfach erstellen kann.

Die ganze Geschichte summerizes in wenigen Worten, "nicht aktiviert Animationen im übergeordneten Abschnitt, So geht der normale CSS-Code als. Class {OPACITY: 0;}".

Entschuldigung! und Danke für Ihre tiefe Besorgnis in einem solchen Problem

Quelle

2017-02-18 17:09:19

Wenn du in Zukunft lernst, wie du dein Element mit Dev-Tools inspizierst, hättest du eine Stunde Zeit gespart. – Adam

Ausgabe oben im Bild, Sie verwendet haben sehr hohe Bildqualität. Wenn Sie ein Bild niedriger Qualität verwenden, als Sie derzeit verwenden, wird es gut funktionieren.

Quelle

2017-02-18 16:42:41 ashanrupasinghe

Ich habe überprüft, Hintergrundbild funktioniert einwandfrei. Deine Bildgröße ist sehr groß, ca. 7 MB. Reduziere es auf bis zu 300 KB, zu groß um es zu zeigen.

Quelle

2017-02-18 16:50:23 Piyali

Ich änderte das Bild mit einem kleineren, aber es erschien nicht –

Während es sicherlich guter Rat ist, ein 7MB Bild nicht als Hintergrundbild eines 200px zu verwenden quadratische div, diese Tatsache allein wird nicht verhindern, dass sie geladen wird. – Adam

Hintergrundbild wird nicht angezeigt

Antwort

Verwandte Themen