Maison > interface Web > tutoriel CSS > Comment réparer les images d'arrière-plan floues sur iOS 7 ?

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

Susan Sarandon
Libérer: 2024-12-11 16:18:11
original
729 Les gens l'ont consulté

How to Fix Blurry Background Images on 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;
}
Copier après la connexion

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;
  }
}
Copier après la connexion
  • 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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal