CSS peut-il créer un masque de dégradé pour fondre le texte dans une image d'arrière-plan ?

Application d'un masque de dégradé pour fondre le texte en arrière-plan à l'aide de CSS

Dans le domaine de la conception Web, lorsque vous travaillez avec des images d'arrière-plan en plein écran , il devient souhaitable d’améliorer l’impact visuel du contenu défilant. Une question revient fréquemment : le CSS peut-il être utilisé pour appliquer un masque de dégradé au texte, lui permettant de se fondre subtilement dans l'arrière-plan ?

La solution réside dans l'exploitation des fonctionnalités CSS avancées prises en charge par les navigateurs modernes. WebKit, par exemple, fournit une solution robuste via une seule ligne CSS :

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

En appliquant ce masque, les 10 % inférieurs de l'élément ciblé disparaîtront progressivement, créant une transition élégante vers l'image d'arrière-plan. . Pour garantir que le fondu n'est visible que lors du défilement, ajoutez padding-bottom à l'élément.

Firefox (Gecko) nécessitait auparavant une approche plus complexe impliquant des images SVG pour obtenir le même effet. Cependant, les progrès du CSS permettent à Firefox de prendre en charge l'image de masque, offrant ainsi une solution pratique et efficace sur différents navigateurs.

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!