Comment réparer les images d'arrière-plan floues sur iOS 7 ?

Problèmes d'image d'arrière-plan fixes dans iOS 7

La mise en œuvre d'une image d'arrière-plan fixe peut s'avérer problématique sur iOS 7, en particulier sur l'iPad, ce qui entraîne une image zoomée et floue. Pour résoudre ce problème, consultez le code CSS suivant :

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

Solutions possibles :

• Utilisez 'background-attachment: scroll' : Cela empêchera l'image d'être corrigée, mais cela pourra au moins l'afficher clairement.
• Implémentez une requête multimédia : limitez le comportement d'arrière-plan fixe aux appareils qui ne sont pas des tablettes ou des téléphones, en utilisant une requête multimédia telle que :

@media screen and (max-device-width: 1024px) {
  .header {
    background-attachment: scroll;
  }
}

• Utilisez 'background-position: scroll' et JavaScript : Gardez l'image fixe en haut de la fenêtre en utilisant JavaScript.

En considérant ces solutions, vous pouvez afficher efficacement une image d'arrière-plan fixe sur iOS 7 sans rencontrer de 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!