Warum funktioniert Background-Size: Cover nicht auf Mobile Safari?

Hintergrundbilder auf Mobile Safari abdecken

Das einzigartige Verhalten von Mobile Safari mit der Eigenschaft „background-size: cover“ kann frustrierend sein. Anstatt das gesamte Div abzudecken, bleibt das Bild häufig zentriert, unabhängig von der Breite des Ansichtsfensters. Dieses Problem kann jedoch leicht mit ein paar Änderungen gelöst werden.

Lösung:

Damit das Hintergrundbild das gesamte Div abdeckt, auch in Mobile Safari, passen Sie das an Eigenschaft „background-attachment“:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section2 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section3 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

So funktioniert es:

Durch die Einstellung „background-attachment: scroll“ kann das Bild nun zusammen mit dem Seiteninhalt scrollen . Dadurch wird sichergestellt, dass das Bild immer die gesamte Breite des Div abdeckt, unabhängig vom Gerät oder der Breite des Ansichtsfensters.

Diese Lösung ersetzt effektiv das Verhalten von „background-size: cover“ auf Mobile Safari, sodass Sie ganz einfach vollständige Bilder erstellen können -Breite Hintergrundbilder, die auf unterschiedliche Bildschirmgrößen reagieren.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Background-Size: Cover nicht auf Mobile Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!