mix-blend-mode
Baseline
Large disponibilité
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS mix-blend-mode définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.
Exemple interactif
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: hard-light;
mix-blend-mode: difference;
<section class="default-example" id="default-example">
<div class="example-container">
<img
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</div>
</section>
.example-container {
background-color: sandybrown;
}
Syntaxe
/* Valeurs avec un mot-clé */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;
/* Valeurs globales */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;
Valeurs
<blend-mode>-
Le mode de fusion qui doit être appliqué.
plus-darkerExpérimental-
Fusion utilisant l'opérateur de composition plus-darker (angl.).
plus-lighter-
Fusion utilisant l'opérateur de composition plus-lighter (angl.). Utile pour les effets de fondu enchaîné (empêche le clignotement indésirable lorsque deux éléments superposés animent leur opacité dans des directions opposées).
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | Non animable |
| Crée un contexte d'empilement | oui |
Syntaxe formelle
mix-blend-mode =
<blend-mode> |
plus-lighter
<blend-mode> =
normal |
darken |
multiply |
color-burn |
lighten |
screen |
color-dodge |
overlay |
soft-light |
hard-light |
difference |
exclusion |
hue |
saturation |
color |
luminosity
Exemples
Effet des différentes valeurs de mix-blend-mode
Utiliser mix-blend-mode avec du SVG
SVG
<svg>
<g class="isolate">
<circle cx="40" cy="40" r="40" fill="red" />
<circle cx="80" cy="40" r="40" fill="lightgreen" />
<circle cx="60" cy="80" r="40" fill="blue" />
</g>
</svg>
CSS
circle {
mix-blend-mode: screen;
}
.isolate {
isolation: isolate;
} /* Sans isolation, la couleur de fond sera prise en compte */
Résultat
Utiliser mix-blend-mode avec du texte
Cet exemple utilise mix-blend-mode pour mélanger la couleur du texte avec la couleur de fond de son élément parent.
HTML
<div class="container">
<p>Plutôt inoffensif</p>
<p class="multiply">Plutôt inoffensif</p>
<p class="screen">Plutôt inoffensif</p>
<p class="hard-light">Plutôt inoffensif</p>
</div>
CSS
@import "https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap";
.container {
background-color: blue;
}
p {
font:
4rem "Rubik Moonrocks",
cursive;
font-weight: bold;
color: orange;
padding: 0.5rem;
margin: 0;
}
.multiply {
mix-blend-mode: multiply;
}
.screen {
mix-blend-mode: screen;
}
.hard-light {
mix-blend-mode: hard-light;
}
Résultat
Spécifications
| Spécification |
|---|
| Compositing and Blending Module Level 2 # mix-blend-mode |
Compatibilité des navigateurs
Voir aussi
- Le type de donnée
<blend-mode> - La propriété
background-blend-mode