Pourquoi mes images d'arrière-plan fixes sont-elles tronquées lors de l'utilisation de « background-size: cover » ?

Taille d'arrière-plan CSS : couverture et pièce jointe d'arrière-plan : images d'arrière-plan de découpage corrigées

Problème :

Dans une liste de figures avec des images d'arrière-plan définies sur « couvrir » et « fixe », les images sont tronquées lorsque la figure est décalée par rapport au viewport.

Explication :

Ce comportement est inhérent au fonctionnement du positionnement "fixe" en CSS. Le positionnement "Fixe" supprime l'image d'arrière-plan du contexte de positionnement de l'élément et l'aligne avec la fenêtre. Par conséquent, la valeur « cover » dans « background-size: cover » est calculée par rapport à la fenêtre d'affichage, et non à l'élément lui-même.

Solution proposée :

L'utilisation d'un positionnement "fixe" et d'une "couverture" pour les images d'arrière-plan n'est pas possible avec du CSS pur.

Alternative Solution :

Au lieu d'un positionnement "fixe", utilisez "scroll" pour la pièce jointe en arrière-plan et liez un écouteur d'événement à l'événement de défilement en JavaScript. Cela met manuellement à jour la position de l'arrière-plan en fonction de la distance de défilement de la fenêtre, simulant un positionnement fixe tout en conservant la « 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!