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

Découpage des images d'arrière-plan avec CSS : compréhension de la couverture de taille d'arrière-plan et de la pièce jointe d'arrière-plan corrigée

Lors de l'utilisation d'images d'arrière-plan dans une liste de figures, définir à la fois background-size: cover et background-attachment:fixed peut entraîner des problèmes d'écrêtage en cas de décalage. Bien que ce comportement soit inhérent au positionnement fixe en CSS, nous explorerons une solution CSS uniquement pour atténuer ce problème.

Mécanique CSS :

La combinaison de background-attachment : fixe et background -size : cover fait que l'image d'arrière-plan se comporte comme une image "fixe" relative à la fenêtre, et la valeur de la couverture est calculée par rapport à la taille de la fenêtre, et non à l'élément. Cela explique pourquoi l'image est correctement couverte lorsque l'élément remplit la fenêtre mais est recadrée lorsqu'elle est plus petite.

Solution proposée :

Malheureusement, une solution CSS pure n'est pas possible car le positionnement fixe est incompatible avec le comportement d’alignement souhaité. Cependant, l'utilisation d'un écouteur d'événement JavaScript lié à l'événement de défilement peut simuler un positionnement fixe et maintenir l'alignement souhaité.

Plus précisément, nous lierons un écouteur d'événement de défilement et mettrons à jour manuellement la propriété background-position en fonction du défilement actuel. position pour obtenir l'effet de positionnement fixe tout en calculant la taille de l'arrière-plan : couverture par rapport à l'élément conteneur.

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!