Wie kann man die Wiederholung von Hintergrundbildern im Vollbildmodus auf Mobilgeräten ohne JavaScript beheben?

Hintergrund der Fehlerbehebung: Kein Wiederholungsproblem auf Mobilgeräten behoben

Problem:

Benutzer haben Schwierigkeiten bei der Implementierung eines vollständigen Bildschirmhintergrundbild mit fester Position auf mobilen Geräten (iPhone und iPad). Trotz der Verwendung von CSS für die Hintergrundgestaltung erscheint das Bild übergroß und neigt dazu, sich beim Herunterscrollen zu wiederholen.

Lösung:

Um dieses Problem zu beheben, gibt es eine neuartige Lösung Es ist eine Lösung entstanden, die JavaScript überflüssig macht. Einführung eines neuen CSS-Snippets:

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

Erklärung:

• Das Pseudoelement body:before erstellt ein zusätzliches Element vor dem Textkörper des HTML-Dokuments .
• Absolute Positionierung stellt sicher, dass das Element in einer festen Position relativ zum bleibt Ansichtsfenster.
• Der negative Z-Index (-10) ermöglicht, dass das Element hinter dem regulären Inhalt der Seite erscheint.
• Das Hintergrundbild, seine Platzierung, Skalierung und Fixierung sind identisch mit das ursprüngliche CSS, das für Desktop-Browser verwendet wird.

Es ist wichtig zu beachten, dass diese Technik kein Hersteller-Präfix erfordert, wodurch eine browserübergreifende Kompatibilität ausgeschlossen ist Probleme.

Das obige ist der detaillierte Inhalt vonWie kann man die Wiederholung von Hintergrundbildern im Vollbildmodus auf Mobilgeräten ohne JavaScript beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!