Ich möchte einen Abschnitt mit einem Hintergrund erstellen, der ihn in einer mobilen Webseite abdeckt. Daher verwendete ich den folgenden CSS-Code:
%Vor%Der Hintergrund wird auf Android korrekt angezeigt (Chrome, Firefox ...), aber auf dem iPhone oder iPad wird er nicht angezeigt (Safari, Chrome iOS ...). Ich habe versucht, diese Eigenschaften mit jQuery zu setzen, wenn das DOM bereit ist, aber kein Glück. Ich lese, dass die Größe ein Problem sein könnte, aber das Bild ist ungefähr 700kB (1124x749px), also sollte es den Safari Web Content Guide Regeln. Welches ist das Problem?
Es gibt ein Problem mit Ihrer CSS-Regel:
Sie verwenden die Kurzschreibweise, in der die Sie versuchen, die Position zu setzen, aber es wird fehlschlagen, weil Damit es in Kurzschrift funktioniert, muss es so aussehen: Beachten Sie auch, dass es einen Wert namens Die Unterstützung für Hier sind ein paar Beispiele und eine Demo, um dieses Verhalten zu demonstrieren. Sie werden sehen, dass Firefox zum Beispiel jedes Bild außer dem ersten zeigt. Safari hingegen zeigt nur die letzte an. CSS Demo Weitere Informationen MDN CSS Referenz "Hintergrund" & lt; 'Hintergrundgröße' & gt; background-size -Eigenschaft nach der background-position -Eigenschaft ist und durch eine / . auto kein gültiger Wert dafür ist. cover gibt, der hier geeigneter und flexibler sein kann: background-size in der Kurzschreibweise ist ebenfalls nicht sehr breit, da sie in Firefox 18+, Chrome 21+, IE9 + und Opera unterstützt wird. Es wird in Safari überhaupt nicht unterstützt. In Bezug darauf würde ich vorschlagen, immer zu verwenden:
MDN CSS-Referenz" background-size "
Siehe background-size .
Diese Eigenschaft muss nach der Hintergrundposition angegeben werden, getrennt durch das Zeichen '/'.
Mein Problem war, dass iOS background-attachment: fixed nicht unterstützt. Durch das Entfernen dieser Linie wurde das Bild angezeigt.
Es sieht jedoch so aus, als gäbe es Problemumgehungen für ein festes Hintergrundbild: Wie repliziere Hintergrund-Anhang auf iOS behoben
Ich hoffe, das wird jemandem in Verzweiflung helfen. In meinem Fall war es die Größe des Bildes, die zu groß war, so dass das iPad es gerade nicht geladen hat (und es war tatsächlich richtig).
Die Verringerung der Größe und Qualität hat das Ladeproblem gelöst.
Das Problem wurde nicht gelöst, als ich versuchte, den Hintergrund in Kurzschrift richtig zu verwenden. Es funktioniert, wenn ich die Hintergrundeigenschaft aufspalte:
%Vor%Reduzieren Sie die Bildgröße, wenn nichts anderes funktioniert - iOS mag keine großen Bildgrößen auf Mobilgeräten und zeigt das Bild einfach nicht an, wenn es zu groß ist.
Tolle Grundlagen von @insertusernamehier! Egal, was ich tat, ich konnte mein Bild nicht zeigen ... bis ich zu den Grundlagen zurückkehrte. Die Bildgröße war zu groß und das iPhone konnte ein Bild dieser Größe über 700 KB nicht laden. Also habe ich es auf 32kb reduziert und wir waren in Aktion.
Ich hatte einen negativen Texteinzug, der mein Hintergrundbild von der Seite wegwarf, also Farbe: Transparent ist es dann.
Ich habe niemanden gesehen, der das ausdrücklich sagt, aber Sie müssen auch die Breite definieren. Da seit ich die Hintergrundgröße auf "contain" gesetzt habe, muss es wissen, wie groß die Abmessungen des Containers sind.
Sobald ich das getan habe, wird der Hintergrund wie erwartet gerendert.
%Vor%Hinweis: Die Hintergrund-URL muss für beide Haltepunkte definiert werden, damit sie für iPhone 5 (iOS7) funktioniert.
Tags und Links css iphone ios ipad background