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.

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: 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.

Syntaxe formelle

Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Exemples

CSS

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/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'));

Spécifications

Spécification État Commentaires
Compositing and Blending Level 1
La définition de 'background-blend-mode' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
Valeur initialenormal
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éenon
Médianone
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
background-blend-modeChrome Support complet 35Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes EdgeHTML 18 has an Enable CSS background-blend-mode property flag, however the feature is an early prototype with no discernable end-user effect.
Firefox Support complet 30IE Aucun support NonOpera Support complet 22Safari Support complet 8WebView Android Support complet OuiChrome Android Support complet 35Firefox Android Support complet 30Opera Android Support complet 22Safari iOS Support complet 8Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, LukyVj, mrstork, Sebastianz, J.DMB, YoruNoHikage
Dernière mise à jour par : SphinxKnight,