Comment créer un dégradé d'opacité dynamique en CSS pour les superpositions de texte ?

Création d'un dégradé d'opacité en CSS

Malgré une couleur de fond dynamique, le but est de créer un effet qui obscurcit partiellement le texte tout en respectant l'arrière-plan. Alors qu'une superposition blanche fonctionne pour les arrière-plans statiques, un dégradé d'opacité CSS est nécessaire pour les arrière-plans dynamiques.

Utilisation d'images de masque CSS

Navigateurs modernes (Chrome, Safari, Opera) prise en charge de l'utilisation d'images de masque CSS pour créer l'effet souhaité. La clé est de définir un masque qui intègre un dégradé qui passe à la transparence :

<code class="CSS">p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>

Où rgba(0,0,0,1) représente l'opacité totale et rgba(0,0,0,0 ) représente une transparence totale.

Démo et compatibilité

Voir une démo pour observer l'effet en action.

Notez que cette technique repose sur la propriété mask-image, dont la prise en charge est limitée dans les anciens navigateurs. Firefox, en particulier, prend actuellement en charge les masques SVG.

Pour plus d'informations et des détails sur la compatibilité des navigateurs, reportez-vous à Caniuse : https://caniuse.com/?search=mask-image

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!