Comment fondre du texte sur un arrière-plan à l'aide d'un masque de dégradé CSS ?

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

Introduction

Incorporation d'un L'image d'arrière-plan fixe de l'écran dans un div défilant présente souvent le défi de faire disparaître en douceur le texte sus-jacent à mesure que les utilisateurs font défiler vers le bas. Cet article explore une solution utilisant un masque de dégradé en CSS.

Question

Comment pouvez-vous appliquer un masque de dégradé en CSS pour faire fondre le texte en arrière-plan sur une partie seulement de l'élément, créant un effet de décoloration progressif ?

Réponse

En utilisant Grâce à la propriété -webkit-mask-image de Webkit, vous pouvez obtenir l'effet souhaité :

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

Ce code crée un dégradé linéaire qui passe du noir opaque en haut de l'élément au transparent dans les 10 % inférieurs. En ajoutant padding-bottom: 50% à l'élément, vous pouvez vous assurer que le contenu ne s'estompe que lorsqu'il y a plus à faire défiler.

Notes

• Cette solution nécessite une compatibilité avec le navigateur, car elle s'appuie sur la propriété propriétaire -webkit-mask-image de Webkit.
• Mozilla (Gecko) a une fonctionnalité de « masque » similaire qui nécessite une image SVG comme entrée, qui peut être intégrée à l'aide de l'encodage base64.

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!