Wie behebe ich Probleme mit Vollbild-Hintergrundbildern auf Mobilgeräten?

Behebung von Hintergrundbildproblemen auf Mobilgeräten

Beim Erstellen einer Webseite, bei der sich das Hintergrundbild über den gesamten Bildschirm erstreckt, bleibt das Seitenverhältnis erhalten. und beim Scrollen fixiert bleibt, könnte CSS-Code wie der folgende verwendet werden:

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Bei der Anwendung dieses Codes auf mobilen Geräten jedoch B. iPhones oder iPads, kann dazu führen, dass das Hintergrundbild zu groß wird und sich wiederholt, wenn weit genug gescrollt wird.

Die Lösung besteht darin, ein „Vorher“-Pseudoelement als Teil des HTML-Körpers zu erstellen, wie unten gezeigt:

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;
}

Es ist wichtig sicherzustellen, dass der Z-Index-Wert des Pseudoelements „vorher“ standardmäßig auf eine negative Zahl (z. B. -10) gesetzt ist Der Z-Index für das Stammelement von HTML ist 0. Dieser negative Wert platziert den Hintergrund als unterste Ebene.

Das obige ist der detaillierte Inhalt vonWie behebe ich Probleme mit Vollbild-Hintergrundbildern auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!