Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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é CSSbackground-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> <div> <div></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 avecbackground-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></div><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 |