diff options
Diffstat (limited to 'files/fr/web/css/background-blend-mode/index.md')
| -rw-r--r-- | files/fr/web/css/background-blend-mode/index.md | 76 |
1 files changed, 38 insertions, 38 deletions
diff --git a/files/fr/web/css/background-blend-mode/index.md b/files/fr/web/css/background-blend-mode/index.md index 4f642b32e5..7dfca3d56f 100644 --- a/files/fr/web/css/background-blend-mode/index.md +++ b/files/fr/web/css/background-blend-mode/index.md @@ -1,10 +1,7 @@ --- title: background-blend-mode slug: Web/CSS/background-blend-mode -tags: - - CSS - - Propriété - - Reference +browser-compat: css.properties.background-blend-mode translation_of: Web/CSS/background-blend-mode --- {{CSSRef}} @@ -13,7 +10,7 @@ La propriété CSS **`background-blend-mode`** définit la façon dont les image {{EmbedInteractiveExample("pages/css/background-blend-mode.html")}} -Les modes de fusions (_blending modes_) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("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. +Les modes de fusions (<i lang="en">blending modes</i>) doivent être définis dans le même ordre que les images sont définies avec [`background-image`](/fr/docs/Web/CSS/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 @@ -27,17 +24,22 @@ 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 {{cssxref("<blend-mode>")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules. + - : Une valeur décrivant un mode de fusion (type [`<blend-mode>`](/fr/docs/Web/CSS/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 +## Définition formelle - Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity +{{cssinfo}} + +## Syntaxe formelle + +{{csssyntax}} ## Exemples @@ -45,10 +47,10 @@ background-blend-mode: unset; ```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; + width: 300px; + height: 300px; + background: url('br.png'),url('tr.png'); + background-blend-mode: screen; } ``` @@ -58,22 +60,22 @@ background-blend-mode: unset; <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> + <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> ``` @@ -81,26 +83,24 @@ background-blend-mode: unset; ```js document.getElementById("select").onchange = function(event) { - document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; } console.log(document.getElementById('div')); ``` -{{EmbedLiveSample('Exemples', "330", "330")}} +### Résultat -## Spécifications +{{EmbedLiveSample('', "330", "350")}} -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}} | {{Spec2('Compositing')}} | Définition initiale. | +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.background-blend-mode")}} +{{Compat}} ## Voir aussi -- {{cssxref("<blend-mode>")}} -- {{cssxref("mix-blend-mode")}} +- [`<blend-mode>`](/fr/docs/Web/CSS/blend-mode) +- [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode) |