Le piratage de pièce jointe à l'arrière-plan fixe

Vous voulez un fond fixe qui reste en place pendant le défilement? background-attachment: fixed dans CSS échoue souvent dans les navigateurs mobiles. Voici une solution de contournement, un «piratage», pour réaliser cet effet.

Le problème

Examinons le problème avec deux types d'arrière-plan: les gradients et les images linéaires.

Gradient linéaire

Pour un gradient fixe sur défilement, nous pourrions utiliser ce CSS:

 corps {
  Contexte: Linear-Gradient (335Deg, RGBA (255,140,107,1) 0%, RGBA (255 228,168,1) 100%);
  Attachement de l'arrière-plan: fixe;
  Position d'arrière-plan: Centre;
  République de fond: sans répétition;
  Hauteur: 100VH;
}

Sur Android Chrome et Firefox, le gradient défile, puis saute. Cela semble lié à la difficulté du navigateur à revoir le gradient en temps réel lorsque la barre d'URL se cache / apparaît. iOS Safari présente un comportement similaire.

Image de fond

Le problème est le même avec les images:

 corps {
  Contexte: url (../ actifs / test_pic.jpg);
  République de fond: sans répétition;
  taille arrière: couverture;
  Position d'arrière-plan: Centre;
  Attachement de l'arrière-plan: fixe;
  Hauteur: 100VH;
}

background-attachment: fixed ignore également la propriété height , calculant la position par rapport à la fenêtre, et non à la hauteur de l'élément. Cela peut être dû au fait que background-attachment: fixed utilise la plus petite fenêtre, tandis que les éléments utilisent le plus grand . Les unités de la fenêtre (VH) ne redimensionnent pas lorsque la barre d'URL modifie la visibilité.

caniuse met en évidence les incohérences du navigateur avec background-attachment: fixed .

La solution (un piratage)

La solution consiste à supprimer background-attachment: fixed et en utilisant des éléments séparés. Si background-attachment: fixed utilise la plus petite fenêtre, utilisons un élément qui utilise le plus grand.

Créez deux divs: un pour l'arrière-plan et un pour le contenu:

<div class="bg"></div>
<div class="content">
  
</div>

Style-les comme ceci:

 .bg {
  Contexte: Linear-Gradient (335Deg, RGBA (255,140,107,1) 0%, RGBA (255 228,168,1) 100%);
  République de fond: sans répétition;
  Position d'arrière-plan: Centre;
  Hauteur: 100VH;
  Largeur: 100 VW;
  Position: fixe;
  Z-Index: -1; /* Facultatif */
}

.contenu {
  Position: absolue;
  marge: 5rem;
  Gauche: 50%;
  Transform: Translatex (-50%);
  Largeur: 80%;
}

Cela fonctionne de manière similaire pour les images d'arrière-plan:

 .img {
  Contexte: url ('../ actifs / test_pic.jpg');
  Position d'arrière-plan: Centre;
  République de fond: sans répétition;
  taille arrière: couverture;
  Position: fixe;
  Hauteur: 100VH;
  Largeur: 100 VW;
}

Bien que le défilement mineur puisse se produire lorsque la barre d'URL se cache, les principaux problèmes sont résolus.

Considérations

Ce "piratage" utilise un<div> au lieu d'un<code><img alt="Le piratage de pièce jointe à l'arrière-plan fixe" > Tag, qui pourrait affecter la sémantique et l'accessibilité. Si l'image est cruciale pour le sens, en utilisant un<img alt="Le piratage de pièce jointe à l'arrière-plan fixe" > Avec un texte alt approprié, c'est mieux, même si cela signifie que le piratage ne fonctionnera pas parfaitement. Une barre de navigation inférieure que les pointes automatiques pourraient encore causer des problèmes. Dans de tels cas, JavaScript pourrait être nécessaire.

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!