Background-blend-mode - Propriété CSS
Résumé des caractéristiques de la propriété background-blend-mode
normal | multiply | screen | overlay | darken | lighten | color-burn | color-dodge | hard-light | soft-light | difference | exclusion | hue | color | luminosity | saturationnormalbackground-blend-mode ne peut pas être animée.Schéma syntaxique de background-blend-mode.
background-blend-modeCliquez sur le schéma pour une description plus complète des valeurs
Précisions sur le schéma :
- On énumère autant de modes de mélange qu'il y a d'arrière-plans, séparés par des virgules.
A quoi sert la propriété CSS background-blend-mode ?
La propriété background-blend-mode définit comment sont mélangées les images d'arrière-plan et la couleur d'arrière-plan.
Par défaut les images du dessous, ainsi que la couleur ne sont visibles que à travers les parties
transparentes des images supérieures. Mais background-blend-mode change ce mode de fonctionnement.
On retrouve un principe identique au mélange de calques dans Photoshop.
Rappel de la syntaxe pour définir un arrière-plan composé de plusieurs images (ici deux) et d'une couleur :
background-image: url('image1'), url('image2'), silver;
└───────────┘ └───────────┘ └─────┘
image dessus image dessous couleur
La propriété background-blend-mode est sans effet si l'arrière-plan est composé d'une seule image ou seulement d'une couleur.
Des informations complémentaires peuvent être trouvées en suivant les liens ci-dessous :
Valeurs pour background-blend-mode.
- background-blend-mode: normal;
Valeur par défaut. L'image du dessus masque les autres images et la couleur d'arrière-plan, sauf dans ses parties transparentes.
- background-blend-mode: lighten; background-blend-mode: darken; background-blend-mode: multiply; background-blend-mode: screen; background-blend-mode: overlay; background-blend-mode: color-burn; background-blend-mode: color-dodge; background-blend-mode: hard-light; background-blend-mode: soft-light; background-blend-mode: difference; background-blend-mode: exclusion; background-blend-mode: hue; background-blend-mode: color; background-blend-mode: luminosity; background-blend-mode: saturation;
Les différents arrière-plans sont mélangés, et la couleur d'arrière-plan également. C'est à dire qu'il sont combinés en fonction du mode de fusion choisi.
Reportez-vous à la page sur Les modes de fusion pour des explications détaillées sur les différents modes de fusion.
- background-blend-mode: multiply, screen, luminosity, ...;
Cette syntaxe, comportant plusieurs valeurs séparées par des virgules, est utilisable lorsque plusieurs arrière-plan ont été définis. Voir Les arrière-plans multiples.
Valeurs standards acceptées par toutes les propriétés:
background-blend-mode: initial (normal)
background-blend-mode: inherit
background-blend-mode: revert
background-blend-mode: revertLayer
background-blend-mode: unset
Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.
Manipulation de la propriété background-blend-mode par programme.
Modifier la valeur de background-blend-mode en Javascript.
Deux exemples de code sont donnés pour modifier la valeur de background-blend-mode de l'élément el.
Javascript accepte en effet une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['background-blend-mode'] = 'darken';
// ou
let el = document.getElementById('id');
el.style.backgroundBlendMode = 'darken';
Lire en Javascript la valeur de background-blend-mode.
La propriété doit avoir été affectée directement dans le code HTML, par l'attribut style de l'élément, et non pas en passant
par un sélecteur CSS.
let el = document.getElementById('id');
el.style['background-blend-mode'] = 'darken';
// ou
let el = document.getElementById('id');
el.style.backgroundBlendMode = 'darken';
Lire la valeur calculée de background-blend-mode en Javascript.
La valeur calculée est toujours définie : elle résulte soit d'une affectation de valeur directement à l'élément, via un sélecteur CSS ou
l'attribut style, soit d'une valeur héritée suivant le mécanisme habituel, soit encore ce sera la valeur initiale de la propriété.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-blend-mode');
Modifier la valeur de la propriété background-blend-mode avec JQuery.
Comme en Javascript, deux variantes de syntaxe sont acceptées.
$('#id').css('background-blend-mode', 'darken');
// ou
$('#id').css('backgroundBlendMode', 'darken');
Lire la valeur calculée de la propriété background-blend-mode avec JQuery.
let value = $('#id').css('background-blend-mode');
Faites votre test.
Les boutons ci-dessous appliquent la valeur saisie à la propriété background-blend-mode et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de background-blend-mode.
Dans le cas de background-blend-mode cela ne fera pas de différences.
Exemple interactif.
L'exemple de gauche comporte un arrière-plan composé des deux images ci-dessous (la fleur et le damier),
la fleur étant positionnée au dessus du damier.
Observez comment background-blend-mode fait interagir ces deux arrière-plans.
L'arrière-plan de l'exemple de droite comporte un dégradé de couleur du blanc au noir, et une image (le damier). Le dégradé est positionné au dessus de l'image.
Fleur
Damier
Compatibilité et prise en charge de background-blend-mode.
background-blend-mode qui définit comment mélanger les arrière-plans.fusion
background-blend-modeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Firefox pour Androïd
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Samsung Internet
KaiOS Browser
Opéra mini
Historique de background-blend-mode.
La propriété background-blend-mode n'est pas définie dans le même module que les autres propriétés relatives aux arrière-plans.
Un module à part a été créé spécialement pour les mélanges d'images.
-
Compositions et mélanges - Niveau 1
Première définition de la propriétébackground-blend-mode.
16 Août 2012Document de travail.
20 Février 2014Candidat à la recommandation.
Voir aussi, au sujet des mélanges de couches.
La spécification du W3C "Compositing and Blending" regroupe tout ce qui concerne les mélanges entre deux couches (deux images, le contenu et l'arrière-plan, etc.)