Pourquoi mes images d'arrière-plan fixes sont-elles cassées sur mobile et comment puis-je les réparer avec CSS uniquement ?

Problèmes d'arrière-plan résolus sur mobile : résolution de la mise à l'échelle et de la répétition

Lors du développement d'une page Web, vous pouvez rencontrer des difficultés lors de l'adaptation des images d'arrière-plan fixes sur mobile appareils. La solution qui s'est avérée efficace sur les navigateurs de bureau, impliquant l'utilisation de propriétés CSS telles que background-size: cover et background: no-repeat center centerfixed, ne parvient pas à produire le résultat souhaité sur les iPhones et iPads.

Pour Pour résoudre ce problème, une solution ingénieuse a émergé qui élimine le besoin de JavaScript et propose une solution simple :

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 fonctionne en créant un pseudo-élément qui agit comme un arrière-plan fixe, positionné derrière tous les autres éléments de la page. Il utilise de nombreuses propriétés CSS similaires à celles utilisées pour l'élément HTML, garantissant ainsi la cohérence du comportement.

Notez que la propriété z-index est définie sur une valeur négative de -10, ce qui est crucial pour le pseudo- élément à apparaître comme arrière-plan. La valeur z-index par défaut pour l'élément racine HTML est 0, et donc la valeur négative garantit que le pseudo-élément est placé derrière tous les autres éléments de la page.

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!