Pourquoi mon image d'arrière-plan découpée est-elle recadrée de manière inattendue lors de l'utilisation de « background-size : cover » et « background-attachment :fixed » ?

Images d'arrière-plan découpées avec CSS background-size : cover background-attachment : corrigé

Lors de l'utilisation des propriétés CSS background-size : cover et background-attachment : corrigés un élément conteneur, l'image d'arrière-plan peut être découpée de manière inattendue si l'élément n'a pas la taille maximale de la fenêtre d'affichage. Cela est dû à la combinaison des deux propriétés, comme expliqué ci-dessous.

Effet de background-attachment:fixed

background-attachment:fixed fait que l'image d'arrière-plan se comporte comme une position:élément fixe , ce qui signifie qu'il ne fait plus partie du flux normal du document et reste stationnaire par rapport à la fenêtre d'affichage.

Interaction avec background-size : cover

background-size : cover met à l'échelle l'image d'arrière-plan pour couvrir l'intégralité de l'élément conteneur. Lorsqu'il est combiné avec background-attachment:fixed, cela signifie que l'image est mise à l'échelle pour couvrir toute la fenêtre d'affichage, pas seulement l'élément conteneur.

Découpage de l'image d'arrière-plan

Si l'élément conteneur est plus petite que la fenêtre d'affichage, l'image d'arrière-plan sera recadrée pour s'adapter verticalement à l'élément conteneur. Cependant, il sera toujours mis à l'échelle horizontalement pour couvrir toute la largeur de la fenêtre. Cela peut entraîner un écrêtage de l'image sur les côtés gauche et droit.

Solution

Malheureusement, il n'existe aucun moyen d'obtenir l'effet souhaité (image tronquée verticalement ou horizontalement mais pas les deux, et centré par l'élément conteneur) en utilisant du CSS pur. Cela est dû à la manière fondamentale dont fonctionne le positionnement fixe en CSS.

Pour obtenir l'effet souhaité, vous devez utiliser JavaScript pour mettre à jour manuellement la propriété background-position par rapport à la position de défilement de la fenêtre, simulant un positionnement fixe. positionnement 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!