Comment réparer la répétition de l'image d'arrière-plan en plein écran sur les appareils mobiles sans JavaScript ?

Contexte du dépannage : résolution d'un problème d'absence de répétition sur les appareils mobiles

Problème :

Les utilisateurs ont des difficultés à mettre en œuvre un image de fond d’écran avec une position fixe sur les appareils mobiles (iPhone et iPad). Malgré l'utilisation de CSS pour le style d'arrière-plan, l'image apparaît surdimensionnée et a tendance à se répéter lors du défilement vers le bas.

Solution :

Pour résoudre ce problème, une nouvelle solution a été a émergé qui élimine le besoin de JavaScript. Présentation d'un nouvel extrait CSS :

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

Explication :

• Le pseudo-élément body:before crée un élément supplémentaire avant le corps du document HTML .
• Le positionnement absolu garantit que l'élément reste dans une position fixe par rapport au viewport.
• L'index z négatif (-10) permet à l'élément d'apparaître derrière le contenu régulier de la page.
• L'image d'arrière-plan, son placement, sa mise à l'échelle et sa fixation sont identiques à le CSS d'origine utilisé pour les navigateurs de bureau.

Il est important de noter que cette technique est sans préfixe de fournisseur, éliminant ainsi la compatibilité entre navigateurs. problèmes.

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!