Comment puis-je empêcher le découpage de l'image d'arrière-plan avec CSS « ​​background-size : cover » et « background-attachment :fixed » ?

Découpage des images d'arrière-plan avec CSS background-size : couverture et background-attachment : corrigé

Face au problème des images d'arrière-plan découpées à l'aide de CSS background-size : cover et background-attachment : corrigés, il est essentiel de comprendre les mécanismes derrière ceux-ci propriétés.

background-size : cover redimensionne l'image pour remplir tout l'élément, tandis que background-attachment :fixed ancre l'image d'arrière-plan à la fenêtre d'affichage. Cela signifie que l'image restera fixe lorsque l'élément défile.

Cependant, cette combinaison conduit à un écrêtage lorsque l'élément est plus petit que la fenêtre d'affichage. En effet, background-size: cover calcule la taille de l'image par rapport à la fenêtre d'affichage, pas à l'élément.

Pour résoudre ce problème, CSS seul est insuffisant, car il s'agit d'une limitation de conception de fixe pièce jointe en arrière-plan. Pour préserver la position et la taille des images dans l'élément, JavaScript est requis.

Plus précisément, vous devrez :

1. Supprimer l'arrière-plan- pièce jointe : corrigée : cela fera en sorte que l'image d'arrière-plan se comporte normalement dans la page flow.
2. Utilisez JavaScript pour écouter les événements de défilement de la fenêtre : Cela vous permettra d'ajuster dynamiquement la propriété background-position.
3. Calculez la nouvelle position d'arrière-plan.  : Déterminez le décalage de l'élément par rapport à la fenêtre d'affichage et appliquez l'ajustement approprié à la propriété background-position.

En implémentant cette solution en JavaScript, vous pouvez simuler un effet de fond fixe tout en conservant le comportement souhaité au sein de l'élément.

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!