Maison >interface Web >tutoriel CSS >Pourquoi mes images d'arrière-plan fixes sont-elles floues dans iOS7 et comment puis-je les corriger ?

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-23 12:25:10491parcourir

Why Are My Fixed Background Images Blurred in iOS7 and How Can I Fix Them?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn