background-blend-mode
Baseline
Widely available
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.
La propriété CSS background-blend-mode définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.
Exemple interactif
background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: hard-light;
background-blend-mode: difference;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element"></div>
</div>
</section>
#example-element {
background-color: green;
background-image: url("/shared-assets/images/examples/balloon.jpg");
width: 250px;
height: 305px;
}
Les modes de fusions (blending modes) doivent être définis dans le même ordre que les images sont définies avec background-image. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.
Syntaxe
/* Une valeur qui s'applique à toutes les images */
background-blend-mode: normal;
/* Deux valeurs, chacune pour une image */
background-blend-mode: darken, luminosity;
/* Valeurs globales */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: revert;
background-blend-mode: unset;
Valeurs
<blend-mode>-
Une valeur décrivant un mode de fusion (type
<blend-mode>) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | Tous les éléments. En SVG, cela s'applique aux éléments de conteneurs, aux éléments graphiques et aux éléments faisant référence à des éléments graphiques.. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |
Syntaxe formelle
background-blend-mode =
<mix-blend-mode>#
Exemples
CSS
#div {
width: 300px;
height: 300px;
background: url("br.png"), url("tr.png");
background-blend-mode: screen;
}
HTML
<div id="div"></div>
<select id="select">
<option>normal</option>
<option>multiply</option>
<option selected>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
JavaScript
document.getElementById("select").onchange = function (event) {
document.getElementById("div").style.backgroundBlendMode =
document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
Résultat
Spécifications
| Specification |
|---|
| Compositing and Blending Level 2 # background-blend-mode |
Compatibilité des navigateurs
Chargement…