Sommaire de l'article
Dernière mise à jour de l'article : mars 2021
CSS blend-mode (mode de fusion d'images) :
Avec CSS, il est de plus en plus facile de se passer d'éditeurs graphiques tels que Photoshop pour ne nommer que lui. Ci-dessous, le blending mode de Photoshop :

Liste des modes utilisables
Vous pouvez donc, avec CSS, appliquer des couches sur des images. Ci dessous, la liste des modes utilisables :
Normal
Multiply
Screen
Overlay
Darken
Lighten
Color-dodge
Color-burn
Hard-light
Soft-light
Difference
Exclusion
Hue
Saturation
Color
Luminosity
Avant d'utiliser les propriétés du module Compositing and Blending Level 1 , un petit tour sur Can I Use vous sera fort utile. Vous pouvez d'ores et déjà oublier la compatibilité avec Internet Explorer.
Propriété background-blend-mode
La propriété background-blend-mode
permet à une image de fusionner son arrière-plan avec l'arrière-plan de la page. Autrement dit, si vous mettez un arrière-plan noir dans une page et que vous placez une image par dessus, celle-ci se mélangera avec l'arrière-plan de la page.
Code :
HTML
<div class="votre_class"></div>
CSS
.votre_class{
background:url(image.jpg) no-repeat top center,
linear-gradient(to bottom, transparent 80%, hsla(0,0%,0%,1) 100%) fixed,
url(image.jpg) no-repeat center center;
background-size: cover,cover;
background-blend-mode: multiply,normal
}
Propriété mix-blend-mode
Contrairement à la propriété background-blend-mode
qui ne vise que les arrières-plan, la propriété mix-blend-mode
s'applique à n'importe quel élément (images, textes...)
Avec la propriété mix-blend-mode
, votre élément sera mélangé à tous les éléments se trouvant en dessous de celui-ci.
Photographies utilisées :


Code :
HTML
<div class="photo1">
<div class="photo2"></div>
</div>
CSS
.photo1{
margin: auto;
background: url(image.jpg);
height: 398px;
width: 600px
}
.photo2{
background: url(image.jpg);
height: 398px;
width: 600px;
mix-blend-mode: hard-light
}
La propriété isolation
:
Cette propriété s'utilise avec les propriétés mix-blend-mode
et background-blend-mode
. Elle va permettre d'isoler certains éléments que vous ne souhaitez pas voir se mélanger avec d'autres.
Passez le curseur de votre souris sur l'image ci-dessous :

Code :
HTML
<div class="pic">
<img src="image.jpg" alt>
</div>
CSS
.pic{
margin: 20px auto;
isolation: isolate;
background: #946fb5;
height: 398px;
width: 600px;
transition: background 1s
}
.pic > img{
mix-blend-mode: overlay
}
.pic:hover{
background: inherit
}
Et si maintenant on appliquait d'autres propriétés comme par exemple un dégradé linéaire, un masque, un filtre, une animation... ou tout cela à la fois...
Blend-modes et dégradés CSS :

Code :
HTML
<div class=conteneur>
<img src="4-mini.jpg" class="degra" alt>
<div class="sous_couche degra" id="gradient"></div>
<div>
CSS
.conteneur{
min-height: 420px;
position: relative;
overflow: hidden
}
.degra{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0%)
}
.degra1{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0%)}
img{
z-index:1;
mix-blend-mode: multiply
}
.sous_couche{
z-index: -1;
width: 597px;
height: 400px
}
#gradient{
background: radial-gradient(ellipse,transparent,rgba(0,0,0,1))
}

Code :
HTML
<div class=conteneur>
<img src="4-mini.jpg" class="degra1" alt/>
<div class="sous_couche degra1" id="gradient1"></div>
<div>
CSS
.conteneur{
min-height: 420px;
position: relative;
overflow: hidden
}
.degra1{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0%)
}
img{
z-index:1;
mix-blend-mode:multiply
}
#gradient1{
background: linear-gradient(to right,transparent,hsla(0, 100%, 50%,.4)),
linear-gradient(to left,transparent,hsla(232, 100%, 50%,.6)),
linear-gradient(to bottom,transparent,hsla(51, 100%, 50%, 1)),
linear-gradient(to top,transparent,hsla(116, 100%, 50%,.4))
}
Blend Modes animation CSS :
Blend-modes avec canvas
Code :
HTML
<canvas height="400" width="597" id="canvas">
</canvas>
JavaScript
<script>var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.rect(0,0,298.5,400);
ctx.closePath();
ctx.fill();
canvas_img();
function canvas_img()
{
image_canvas = new Image();
image_canvas.src = 'votre_image.jpg';
image_canvas.onload = function(){
ctx.drawImage(image_canvas,0,0);
ctx.globalCompositeOperation = 'darker';
}}
</script>
Source, inspiration, ressources :
CSSGram : galerie de filtres CSS .
Exemple propriété mix-blend-mode
.
Exemple Blend Modes sur vidéo .
Article sur Blend Modes (FR) .
Exemple Blend Modes et Canvas .
Exemple Blend Modes et dégradés CSS .
Voir aussi sur ce blog :
Article sur les filtres CSS
Apprendre les filtres SVG
Article sur l'élément HTML canvas
.
Vous rencontrez un problème avec cet article ?
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.