Le mode de fusion ou “blend mode” en CSS est une propriété utilisée pour définir le mode de mélange entre les éléments. Il est notamment utilisé pour créer des effets visuels intéressants en combinant des images ou des couleurs.
La propriété CSS est `mix-blend-mode`.
Voici un exemple simple de l’utilisation de cette propriété :
```
.div1 {
background-color: red;
mix-blend-mode: multiply;
}
```
Cela fera en sorte que le div avec la classe `.div1` se fondra avec les éléments de l’arrière-plan en utilisant le mode de fusion “multiply”, qui multiplie les valeurs de la couleur de l’élément avec la couleur de l’arrière-plan.
Voici une liste des valeurs possibles pour cette propriété :
- `normal`: C’est la valeur par défaut, aucun effet de mélange n’est appliqué.
- `multiply`: Les valeurs de couleur des pixels de l’image sont multipliées par les valeurs de couleur de l’arrière-plan.
- `screen`: Une inversion de “multiply”. Les zones plus sombres sont rendues plus claires.
- `overlay`: Combine “multiply” et “screen”. Les parties claires deviennent plus claires et les parties sombres deviennent plus sombres.
- `darken`: Retient les pixels les plus sombres. Compare chaque pixel de l’image avec le pixel correspondant de l’arrière-plan, et retient le plus sombre.
- `lighten`: Retient les pixels les plus clairs. Compare chaque pixel de l’image avec le pixel correspondant de l’arrière-plan, et retient le plus clair.
- `color-dodge`: Éclaircit l’arrière-plan pour refléter la source.
- `color-burn`: Assombrit l’arrière-plan pour refléter la source.
- `hard-light`: Combine “multiply” et “screen”. L’effet dépend de la couleur de la source.
- `soft-light`: Une version plus douce de “hard-light”. L’effet dépend de la couleur de la source.
- `difference`: Soustrait les valeurs de couleur les plus foncées des plus claires.
- `exclusion`: Comme “difference”, mais avec un contraste inférieur.
- `hue`: Applique la teinte de la source à l’arrière-plan.
- `saturation`: Applique la saturation de la source à l’arrière-plan.
- `color`: Applique la couleur de la source à l’arrière-plan.
- `luminosity`: Applique la luminosité de la source à l’arrière-plan.
Veuillez noter que le support du navigateur pour `mix-blend-mode` n’est pas universel et qu’il peut ne pas fonctionner sur tous les navigateurs ou toutes les versions de navigateurs. Vous pouvez vérifier le support actuel sur des sites comme Can I Use.
