Wie behebe ich Probleme mit der Skalierung von Hintergrundbildern auf mobilen Geräten, indem ich nur CSS verwende?

Problem mit der Skalierung von Hintergrundbildern auf Mobilgeräten behoben

Durch die Anwendung der in der Frage bereitgestellten CSS-Stile auf ein HTML-Element wird der gewünschte Skalierungseffekt erzielt ein Hintergrundbild, das den gesamten Bildschirm ausfüllt, sein Seitenverhältnis beibehält und in Desktop-Browsern an seinem Platz bleibt. Allerdings erzielen diese Stile auf iPhones und iPads nicht das gleiche Ergebnis. Auf diesen Geräten erstreckt sich das Hintergrundbild über das Ansichtsfenster hinaus und beginnt sich zu wiederholen, wenn ausreichend nach unten gescrollt wird.

Um dieses Problem zu beheben, wurde eine innovative Lösung entwickelt, die JavaScript überflüssig macht:

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Diese Lösung erstellt ein neues Element mithilfe der Pseudoklasse :before, das absolut über dem gesamten Körperelement positioniert ist. Diesem Element wird das Hintergrundbild mit den gewünschten Skalierungs- und Platzierungseigenschaften zugewiesen. Durch Festlegen eines negativen Z-Index-Werts von -10 wird dieses Element zum Hintergrund für die gesamte Seite und stellt so sicher, dass es hinter allen anderen Inhalten bleibt.

Diese Technik bietet eine einfache und effektive Methode zum Korrigieren von Hintergrundbildern auf Mobilgeräten Geräte, wodurch die Einschränkungen behoben werden, die bei den ursprünglichen CSS-Stilen auftreten.

Das obige ist der detaillierte Inhalt vonWie behebe ich Probleme mit der Skalierung von Hintergrundbildern auf mobilen Geräten, indem ich nur CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!