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
| saturation
normal
background-blend-mode
ne peut pas être animée.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 :
Syntaxes pour background-blend-mode
.
On énumère autant de modes de mélange qu'il y a d'arrière-plans, séparés par des virgules.
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; Etc.
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.
- background-blend-mode:
initial
; background-blend-mode:inherit
; background-blend-mode:revert
; background-blend-mode:revert-layer
; background-blend-mode:unset
;La valeur initiale est :
.normal
Manipulation de la propriété background-blend-mode
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
Ce paramètre el
peut être initialisé avec document.getElementById()
ou document.querySelector()
.
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).
function setBackgroundBlendMode(el) {
el.style['background-blend-mode']='darken';
// ou
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.
function getBackgroundBlendMode(el) {
alert(el.style['background-blend-mode']);
// ou
alert(el.style.backgroundBlendMode);
}
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 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é.
function getCalcBackgroundBlendMode(el) {
alert(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.
function setBackgroundBlendMode(el) {
$(el).css('background-blend-mode','screen');
// ou
$(el).css('backgroundBlendMode','screen');
}
Lire la valeur calculée de la propriété background-blend-mode
avec JQuery.
function getCalcBackgroundBlendMode(el) {
alert($(el).css('background-blend-mode'));
// ou
alert($(el).css('backgroundBlendMode'));
}
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
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que background-blend-mode
.
Les spécifications CSS éditées par le W3C sont organisées en modules. background-blend-mode
fait partie du Compositions et mélanges (Compositing and Blending). Les définitions suivantes sont également décrites dans ce même module.