Comment puis-je fondre du texte dans une image d'arrière-plan à l'aide de dégradés CSS ?

Application de masques de dégradé pour fondre le texte en arrière-plan

Les concepteurs de sites Web sont souvent confrontés au défi de créer un texte qui se fond visuellement dans une image d'arrière-plan fixe. Une solution efficace consiste à appliquer un masque de dégradé qui atténue le texte vers l'arrière-plan en haut du div défilant.

Pour obtenir cet effet, les navigateurs Webkit proposent une solution CSS simple :

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

Cette ligne de code fait disparaître les 10 % inférieurs d'un élément sans s'appuyer sur des images. Pour garantir que le contenu ne s'estompe que lorsqu'il y a plus à faire défiler, pensez à ajouter padding-bottom : 50 %.

Dans les navigateurs prenant en charge les masques CSS, tels que Firefox et les versions modernes de Microsoft Edge, la syntaxe suivante est préféré :

mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

Ce code crée un masque de dégradé vertical qui fait disparaître la partie inférieure de l'élément, révélant l'image d'arrière-plan.

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!