Guillaume Duverger - Développement & Graphisme - Blog

CSS BLEND-MODE (MODE DE FUSION D'IMAGES)
Vous êtes ici : Accueil Blog > Articles > CSS
Sommaire de l'article
  1. Introduction
  2. Liste des modes utilisables
  3. Propriété background-blend-mode
  4. Propriété mix-blend-mode
  5. La propriété isolation
  6. Blend-modes et dégradés CSS
  7. Blend Modes animation CSS
  8. Blend-modes avec canvas
  9. Aller plus loin

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 :

blend mode photoshop

Liste des modes utilisables

Vous pouvez donc, avec CSS, appliquer des couches sur des images. Ci dessous, la liste des modes utilisables :

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.

BORN IN USA

Photographies utilisées :

Source originale photos .

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.

haut page