Récemment, tout en travaillant sur un projet client, j'avais besoin d'un effet visuel spécifique pour une image. Images d'arrière-plan, en utilisant background-attachment: fixed; , réaliser facilement cet effet de défilement fixe - l'image reste stationnaire même lorsque la page défile. Cet effet, bien qu'il ne soit pas fréquemment utilisé, peut être assez frappant, en particulier lorsqu'il est appliqué subtilement.

Table des matières

• Pourquoi utiliser<img alt="La recherche d'un effet de fond fixe avec des images en ligne" > Au lieu de background-image ?
• Utilisation background-image CSS
• L'astuce clip-path pour les images en ligne
• Une meilleure approche?

Initialement, je visais à reproduire cet effet fixe en utilisant une image en ligne (<img alt="La recherche d'un effet de fond fixe avec des images en ligne" > ) Au lieu d'une image d'arrière-plan CSS. Une démonstration de l'effet souhaité est disponible ici . Le code de cette démo est dans ce référentiel GIT (Remarque: Ceci est un projet Next.js). Un exemple de codepen simplifié avec HTML brut suivra.

Pourquoi utiliser<img alt="La recherche d'un effet de fond fixe avec des images en ligne" > Au lieu de background-image ?

Plusieurs raisons ont motivé ma préférence pour le<img alt="La recherche d'un effet de fond fixe avec des images en ligne" > étiqueter:

• Chargement paresseux plus facile.
• Amélioration du référencement et de l'accessibilité via le texte alt .
• Performances de chargement optimisées à l'aide de srcset / sizes .
• Sélection d'image optimisée par le navigateur via le<picture></picture> étiqueter.
• économie d'image directe pour les utilisateurs (sans Devtools).

En utilisant le<img alt="La recherche d'un effet de fond fixe avec des images en ligne" > La TAG est généralement préférable lorsque l'image est considérée comme du contenu plut?t que de la simple décoration. Ma solution impliquait la propriété clip-path CSS. Comparons cela avec la méthode background-image .

1. Utilisation background-image CSS

L'approche traditionnelle utilise background-image :

 .Hérifier la section {
  Background-Image: URL ("NICE_BG_IMAGE.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;
}

Cependant, cette méthode a des limites. L'image n'est pas traitée comme du contenu, impactant l'accessibilité (lecteurs d'écran). Il ne fonctionne également de manière optimale que lorsque l'image se remplit ou est centrée dans la fenêtre. Les images hors centre nécessitent des requêtes multimédias pour un positionnement approprié sur différents appareils.

2. Utilisation de l'astuce clip-path sur une image en ligne

Une solution de débordement de pile utilisant clip-path fournit une alternative:

 .image-container {
  Position: relative;
  hauteur: 200px;
  Clip-path: encadré (0);
}

.image {
  FIT d'objet: couverture;
  Position: fixe;
  à gauche: 0;
  en haut: 0;
  Largeur: 100%;
  hauteur: 100%;
}

Cette approche maintient le<img alt="La recherche d'un effet de fond fixe avec des images en ligne" > Les avantages de Tag. Cependant, il est moins concis et clip-path présente des défis. Par exemple, un style simple comme border-radius nécessite des modifications au clip-path lui-même. Un positionnement d'image précis dans le clip-path peut également être complexe.

Une meilleure approche?

En fin de compte, je suis revenu à l'utilisation background-image CSS, reconnaissant ses limites. Quelqu'un a-t-il réussi à implémenter cet effet de défilement fixe avec une image en ligne d'une manière plus élégante? J'apprécierais d'entendre vos solutions!

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!