Comment résoudre les problèmes de mise à l'échelle de l'image d'arrière-plan sur les appareils mobiles en utilisant uniquement CSS ?

Correction d'un problème de mise à l'échelle de l'image d'arrière-plan sur les appareils mobiles

L'application des styles CSS fournis dans la question à un élément HTML permet d'obtenir l'effet de mise à l'échelle souhaité une image d'arrière-plan qui s'adapte à tout l'écran, en conservant son rapport hauteur/largeur et en restant fixe sur les navigateurs de bureau. Cependant, ces styles ne parviennent pas à produire le même résultat sur les iPhones et les iPads. Sur ces appareils, l'image d'arrière-plan s'étend au-delà de la fenêtre d'affichage et commence à se répéter si elle est suffisamment défilée vers le bas.

Pour résoudre ce problème, une solution innovante a été développée qui élimine le besoin de JavaScript :

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

Cette solution crée un nouvel élément en utilisant la pseudo-classe :before, qui est positionnée de manière absolue sur tout l'élément body. L'image d'arrière-plan est attribuée à cet élément avec les propriétés de mise à l'échelle et de placement souhaitées. En définissant une valeur d'index z négative de -10, cet élément devient l'arrière-plan de la page entière, garantissant qu'il reste derrière tout autre contenu.

Cette technique fournit une méthode simple et efficace pour corriger les images d'arrière-plan sur mobile. appareils, répondant aux limitations rencontrées avec les styles CSS d'origine.

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!