Warum sind meine festen Hintergrundbilder auf Mobilgeräten kaputt und wie kann ich sie nur mit CSS reparieren?

Behobene Hintergrundprobleme auf Mobilgeräten: Skalierung und Wiederholung beheben

Bei der Entwicklung einer Webseite kann es zu Herausforderungen bei der Anpassung fester Hintergrundbilder auf Mobilgeräten kommen Geräte. Die Lösung, die sich auf Desktop-Browsern als effektiv erwiesen hat und die Verwendung von CSS-Eigenschaften wie „background-size: cover“ und „background: no-repeat center center behoben“ beinhaltet, führt auf iPhones und iPads nicht zum gewünschten Ergebnis.

Zu Um dieses Problem anzugehen, ist eine einfallsreiche Lösung entstanden, die JavaScript überflüssig macht und eine unkomplizierte Lösung bietet:

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 funktioniert durch die Erstellung eines Pseudoelements, das als fester Hintergrund fungiert und positioniert wird hinter allen anderen Seitenelementen. Es nutzt viele CSS-Eigenschaften, die denen des HTML-Elements ähneln, und sorgt so für ein konsistentes Verhalten.

Beachten Sie, dass die Z-Index-Eigenschaft auf einen negativen Wert von -10 gesetzt ist, und dies ist entscheidend für die Pseudo- Element, das als Hintergrund angezeigt werden soll. Der Standard-Z-Indexwert für das HTML-Stammelement ist 0, und daher stellt der negative Wert sicher, dass das Pseudoelement hinter jedem anderen Element auf der Seite platziert wird.

Das obige ist der detaillierte Inhalt vonWarum sind meine festen Hintergrundbilder auf Mobilgeräten kaputt und wie kann ich sie nur mit CSS reparieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!