Pourquoi Background-Size : Cover ne fonctionne-t-il pas sur Mobile Safari ?

Couverture des images d'arrière-plan sur Mobile Safari

Le comportement unique de Mobile Safari avec la propriété background-size: cover peut être frustrant. Au lieu de couvrir l'intégralité du div, l'image reste souvent centrée, sans être affectée par la largeur de la fenêtre. Cependant, ce problème peut être facilement résolu avec quelques modifications.

Solution :

Pour que l'image d'arrière-plan couvre l'intégralité du div, même sur Mobile Safari, ajustez la Propriété background-attachment :

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section2 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section3 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

Comment ça marche :

En définissant background-attachment : scroll, l'image est désormais autorisée à défiler avec le contenu de la page. Cela garantit que l'image couvre toujours toute la largeur du div, quel que soit l'appareil ou la largeur de la fenêtre.

Cette solution remplace efficacement le comportement de background-size: cover sur Mobile Safari, vous permettant de créer facilement des images complètes. -images d'arrière-plan de largeur qui répondent à différentes tailles d'écran.

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!