Wie erweitere ich Hintergrundbilder in Mobile Safari, ohne „background-size: cover' zu verwenden?

Erweitern von Hintergrundbildern in Mobile Safari ohne Verwendung von CSS „background-size: cover“

Während CSS „background-size: cover“ häufig zum Erweitern verwendet wird Bei der Verwendung von Hintergrundbildern können bestimmte Szenarien, insbesondere auf iOS-Geräten, eine Herausforderung darstellen. Ein solches Problem besteht darin, Hintergrundbilder zu erweitern, um Divs abzudecken, deren Breite je nach Größe des Ansichtsfensters und der Höhe des Inhalts variieren kann.

Die Hauptursache für dieses Problem ist nicht „background-size: cover“, sondern „background-attachment: behoben“. Diese Eigenschaft verhindert, dass sich das Hintergrundbild mit dem Seiteninhalt bewegt, was zu unerwünschtem Verhalten auf Mobilgeräten führt.

Um dieses Problem zu beheben, erwägen Sie die Verwendung einer Medienabfrage, um gezielt iPhone-Geräte anzusprechen, und legen Sie die Eigenschaft „Hintergrundanhang“ auf Scrollen fest . Dadurch kann das Hintergrundbild mit der Seite scrollen, wodurch das Problem effektiv gelöst wird.

Hier ist ein Beispiel-CSS-Code mit einer Medienabfrage, die auf iPhone-Geräte abzielt:

.cover {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

Indem Sie dies einbinden Mit der Medienabfrage können Sie sicherstellen, dass Ihre Hintergrundbilder nicht nur so erweitert werden, dass sie das gesamte Div abdecken, sondern sich auch problemlos an unterschiedliche Ansichtsfenstergrößen auf Desktop- und Mobilgeräten anpassen.

Das obige ist der detaillierte Inhalt vonWie erweitere ich Hintergrundbilder in Mobile Safari, ohne „background-size: cover' zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!