Background-blend-mode - Propriété CSS

Syntaxe de background-blend-mode (schéma).

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

• On énumère autant de modes de mélange qu'il y a d'images d'arrière-plans, séparés par des virgules.

Description de la propriété 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 :

• Présentation générale des arrière-plans en CSS.
• Les arrière-plans multiples.
• Tutoriel sur Les modes de fusion.
• La propriété mix-blend-mode pour mélanger l'avant-plan et l'arrière-plan.

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.

• background-blend-mode: initial; (normal) background-blend-mode: inherit; background-blend-mode: revert; background-blend-mode: revert-layer; background-blend-mode: revert-rule; background-blend-mode: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, revert-rule, unset.

La propriété background-blend-mode et 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';

Avec Javascript, lire 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'); let value = el.style['background-blend-mode']; // ou let el = document.getElementById('id'); let value = el.style.backgroundBlendMode;

Avec Javascript, lire la valeur calculée de background-blend-mode.

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');

Avec JQuery, lire ou modifier la valeur de background-blend-mode.

Comme en Javascript, deux variantes de syntaxe sont acceptées.


// Lire la valeur :
$('#id').prop('background-blend-mode');
// Écrire la valeur :
$('#id').prop('background-blend-mode', 'darken');
$('#id').prop('{background-blend-mode': 'darken'});


Avec JQuery, lire la valeur calculée de background-blend-mode.

let value = $('#id').css('background-blend-mode');

Faites le test vous même.

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 il n'y aura pas de différences entre les deux valeurs, sauf si vous saisissez une valeur incorrecte.

Simulateur avec la propriété background-blend-mode.

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

Dégradé

Support de background-blend-mode.

La propriété background-blend-mode est bien reconnue par tous les navigateurs actuels.

1

Mode de
fusion

2

Propriété
background-blend-mode

Estimation de la prise en charge globale.

96%

97%

Navigateurs 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

Chrome

Edge

Firefox

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la propriété 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

  Ce module définit comment sont composées les images des éléments qui se superposent. On trouvera dans ce module :
  - des opérateurs de composition,
  - des modes de fusion avancés,
  - des groupes de composition,
  - des propriétés pour l'isolation.

  Concernant background-blend-mode Première définition de la propriété background-blend-mode.
  

  16 Août 2012

  Document de travail.

  

  20 Février 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des mélanges de couches.

La spécification du W3C "compositions et mélanges" regroupe tout ce qui concerne les mélanges entre deux couches (deux images, le contenu et l'arrière-plan, etc.)

Propriétés :