Comment obtenir des dégradés d'opacité en CSS ?

Implémentation de dégradés d'opacité en CSS

Dans le but de reproduire un effet visuel spécifique impliquant une superposition sur une couleur d'arrière-plan dynamique, beaucoup ont cherché la solution d'un dégradé d'opacité CSS. Bien que les exemples fournis dans la question démontrent des tentatives de mise en œuvre, elles échouent en raison de la complexité du code ou des limitations du navigateur.

Heureusement, les progrès des navigateurs ont permis d'obtenir des dégradés d'opacité entièrement dans CSS en utilisant le masque-image. Actuellement prise en charge par Chrome, Safari, Opera et tous les navigateurs à l'exception d'Internet Explorer, cette propriété offre une solution plus efficace et compatible avec tous les navigateurs.

Implémentation CSS :

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

L'astuce consiste à utiliser un dégradé comme masque lui-même, où le dégradé passe à la transparence (via les valeurs alpha). Cela permet de créer un effet de superposition qui s'ajuste dynamiquement en fonction de la couleur d'arrière-plan.

Exemple avec un arrière-plan uni :

[Lien démo]

Remarques supplémentaires :

Toutes les propriétés d'image pour
• mask-image sont prises en charge.
Le masquage CSS n'est disponible que pour les éléments de texte et peut ne pas se comporter comme prévu avec les images.

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!