OUJOOD.COM
Propriété CSS mix-blend-mode : définition
La propriété CSS mix-blend-mode permet de spécifier comment les éléments doivent se mélanger avec l'arrière-plan.
La propriété css mix-blend-mode est très utile pour créer des effets de transparence et de superposition d'éléments.
Définition et utilisation
La propriété mix-blend-mode est utilisée pour spécifier le mode de mélange à appliquer entre l'élément et son arrière-plan. Elle peut être appliquée à tous les éléments de la page, y compris les éléments textuels.
Syntaxe générale
La syntaxe générale de la propriété mix-blend-mode est la suivante :
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten| color-dodge|color-burn|difference|exclusion|saturation| hue|color|luminosity;
La valeur par défaut est "normal".
Valeurs possibles
Les valeurs possibles pour la propriété mix-blend-mode sont les suivantes :
- normal : mélange normal
- multiply : multiplication des couleurs
- screen : écran
- overlay : superposition
- darken : obscurcissement
- lighten : éclaircissement
- color-dodge : éclaircissement des couleurs
- color-burn : obscurcissement des couleurs
- difference : différence
- exclusion : exclusion
- hue : teinte
- saturation : saturation
- color : couleur
- luminosity : luminosité
Exemples
Voici quelques exemples d'utilisation de la propriété mix-blend-mode :
Exemple : 📋 Copier le code
<div style="background-color: #ff0000; mix-blend-mode: multiply; width: 200px; height: 200px;"></div> <div style="background-color: #00ff00; mix-blend-mode: screen; width: 200px; height: 200px;"></div> <div style="background-color: #0000ff; mix-blend-mode: overlay; width: 200px; height: 200px;"></div>
Dans cet exemple, la propriété mix-blend-mode est utilisée pour créer des effets de transparence et de superposition entre les éléments et leur arrière-plan.
| Valeurs par défaut | normal |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | |
| Syntaxe JavaScript: | object.style.mixBlendMode = "darken" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 41 | 79 | 32 | 8 | 35 |
Conseils et astuces d'utilisation
Voici quelques conseils et astuces pour utiliser la propriété mix-blend-mode de manière efficace :
- Expérimentez avec les différentes valeurs pour trouver l'effet souhaité.
- Utilisez la propriété mix-blend-mode en conjonction avec d'autres propriétés CSS, telles que l'opacité, pour créer des effets plus complexes.
- Assurez-vous que le mélange des couleurs est cohérent avec le design global de votre site.
- Utilisez des images avec des couleurs et des contrastes différents pour obtenir des effets plus intéressants.
En conclusion, la propriété CSS mix-blend-mode est une propriété très utile pour créer des effets de transparence et de superposition entre les éléments et leur arrière-plan. En expérimentant avec les différentes valeurs, vous pouvez créer des effets très intéressants et ajouter de la profondeur à votre design.
Exemple : Un conteneur avec un fond orange et une image qui se fond avec le conteneur orange (foncer) :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété mix-blend-mode </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color:orange;
padding: 15px;
}
.container img {
mix-blend-mode: darken;
}
</style>
</head>
<body>
<h2>La propriété mix-blend-mode</h2>
<p>La propriété mix-blend-mode indique comment le contenu d'un élément doit se fondre dans son arrière-plan :</p>
<div class="container">
<img src="images/anas.png" alt="Anas" width="300" height="300">
</div>
</body>
</html>