« background-size : cover » et « background-attachment :fixed » provoquent-ils un écrêtage de l'image d'arrière-plan, et comment cela peut-il être résolu ?

Taille d'arrière-plan CSS : pièce jointe d'arrière-plan de couverture : images d'arrière-plan à découpage fixe

Pouvez-vous rencontrer une situation dans laquelle des images d'arrière-plan avec une taille d'arrière-plan : couverture et pièce jointe d'arrière-plan : corrigés, écrêtés ?

Le Problème :
Comme le suggère la question, dans un scénario avec des figures utilisant des images d'arrière-plan, la combinaison de background-size: cover et background-attachment:fixed conduit à un écrêtage des images d'arrière-plan lorsqu'il y a un décalage. Il s'agit d'un comportement inhérent au CSS, tel que documenté par Mozilla.

L'objectif :
Le résultat souhaité est que les images soient découpées verticalement ou horizontalement, mais pas les deux, tout en conservant alignement centré au sein de la figure elle-même.

La solution :
Malheureusement, obtenir ce résultat uniquement avec CSS est pas possible. Comme détaillé dans la réponse, le positionnement fixe en CSS crée une déconnexion entre l'image d'arrière-plan et l'élément conteneur. Par conséquent, même avec la valeur de couverture, la taille de l'image est déterminée par rapport à la fenêtre d'affichage plutôt qu'aux dimensions de la figure.

Alternative JavaScript :
La solution recommandée consiste à utiliser JavaScript pour simuler l'effet de positionnement fixe lors du calcul de la taille de l'arrière-plan : couverture par rapport à l'élément de la figure. Cela implique d'écouter les événements de défilement et d'ajuster manuellement la position de l'arrière-plan pour qu'elle corresponde au défilement de la fenêtre.

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!