Pourquoi mes images d'arrière-plan fixes sont-elles floues dans iOS7 et comment puis-je les corriger ?

Résolution des problèmes d'image d'arrière-plan dans iOS7

On peut rencontrer des difficultés lors de l'utilisation d'images d'arrière-plan fixes dans iOS7. Ce problème survient lorsque l’image d’arrière-plan apparaît agrandie et floue, notamment sur les iPad. Pour résoudre ce problème, il est nécessaire d'examiner le code CSS utilisé.

L'extrait de code fourni par l'utilisateur comprend les déclarations CSS suivantes :

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

La combinaison problématique est l'utilisation de l'arrière-plan -pièce jointe : fixe avec fond-taille : couverture. Ce couplage entraîne des problèmes de compatibilité avec de nombreux navigateurs mobiles, dont iOS7.

Solution 1 : Background-Attachment : Scroll

Une option consiste à remplacer background-attachment :fixed par pièce jointe d'arrière-plan : défilement. Bien que cela n'obtienne pas l'effet "fixe" souhaité, au moins les images seront visibles.

Solution 2 : Position de l'arrière-plan : faites défiler avec JavaScript

Alternativement , on peut utiliser background-position: scroll et implémenter JavaScript pour maintenir la position de l'image en haut de la fenêtre. Cette approche nécessite un codage légèrement plus avancé mais offre une solution plus attrayante visuellement.

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!