Comment résoudre les problèmes d'image d'arrière-plan en plein écran sur les appareils mobiles ?

Résolution des problèmes d'image d'arrière-plan sur les appareils mobiles

Lors de la création d'une page Web où l'image d'arrière-plan s'étend en plein écran, conserve son rapport hauteur/largeur, et reste fixe pendant le défilement, un code CSS comme celui-ci peut être utilisé :

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

Cependant, en appliquant ce code sur mobile les appareils, tels que les iPhones ou les iPads, peuvent entraîner une image d'arrière-plan surdimensionnée et répétée si elle est suffisamment défilée.

La solution réside dans la création d'un pseudo-élément "avant" dans le corps HTML, comme indiqué ci-dessous. :

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

Il est important de s'assurer que la valeur z-index du pseudo-élément "avant" est définie sur un nombre négatif (par exemple, -10), car L'index z par défaut pour l'élément racine du HTML est 0. Cette valeur négative place l'arrière-plan comme couche la plus basse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!