Propriété CSS mix-blend-mode

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>

Liste des propriétés css

Voir aussi nos tutoriel :

Utiliser la propriété CSS mix-blend-mode pour créer des effets de superposition

Les propriétés CSS par ordre alphabétique