Comment créer un dégradé d'opacité CSS à l'aide de masques ?

Dégradé d'opacité CSS

L'objectif est de créer un effet basé sur CSS ressemblant à l'exemple fourni, où une superposition avec un dégradé est appliquée sur un arrière-plan avec une couleur dynamique.

Utilisation de masques CSS

En CSS, vous pouvez y parvenir en utilisant des masques. Bien que la prise en charge par les navigateurs de cette méthode soit encore limitée, les versions modernes de Chrome, Safari et Opera prennent en charge les propriétés nécessaires (-webkit-mask-image et -webkit-mask-size, entre autres).

La clé est pour créer un masque qui est lui-même un dégradé, commençant par une opacité complète (visible) et se terminant par une transparence (invisible). Cela entraînera un effet de dégradé sur le contenu situé en dessous.

Mise en œuvre du code

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)));
}

Exemple d'utilisation

Ce CSS peut être appliqué à un élément de paragraphe pour afficher du texte avec un effet de dégradé :

<p>This is a paragraph with a CSS opacity gradient.</p>

Dans cet exemple, le texte sera affiché en rouge dans un dégradé qui passe de l'opaque à gauche au transparent à la droite. La transparence permet à la couleur d'arrière-plan d'apparaître lorsque vous vous déplacez vers la droite.

Il est important de noter que la couleur de l'élément d'arrière-plan doit être définie afin de voir l'effet de dégradé d'opacité. Dans l'exemple fourni, la couleur d'arrière-plan est bleu clair :

  <p>This is a paragraph with a CSS opacity gradient.</p>

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!