¿Cómo usar background-blend-mode?

¿Qué es background-blend-mode?

La propiedad background-blend-mode en pocas palabras lo que hace es mezclar una imagen con algún color y dependiendo del valor, dicha imagen tenga un efecto, ¿Estás confundido?, el código te puede ayudar a entender …

¿Cómo usar background-blend-mode?

Para usar background-blend-mode hay varias maneras, una forma básica es usarla de la siguiente forma:

HTML

<div class="imagen"></div>  

CSS

imagen {  
   width: 640px; /* Ancho */
   height: 425px; /* Alto */
   background-image: url(imagen.jpg); /* Imagen */
   background-color: #0C94F5; /* Color */
   background-blend-mode: multiply; /* Efecto */
}

Solo con esas simples propiedades podemos empezar a usar múltiples efectos:

Multiply

background-color: #0C94F5;  
background-blend-mode: multiply;

Screen

background-color: #0C94F5;  
background-blend-mode: screen;

Overlay

background-color: #0C94F5;  
background-blend-mode: overlay;

Darken

background-color: #0C94F5;  
background-blend-mode: darken;

Lighten

background-color: #0C94F5;  
background-blend-mode: lighten;

Color-dodge

background-color: #0C94F5;  
background-blend-mode: color-dodge;

Color-burn

background-color: #0C94F5;  
background-blend-mode: color-burn;

Hard-light

Una de mis mezclas favoritas.

background-color: #0C94F5;  
background-blend-mode: hard-light;

Soft-light

background-color: #0C94F5;  
background-blend-mode: soft-light;

Difference

Wooow!

background-color: #0C94F5;  
background-blend-mode: difference;

Exclusion

background-color: #0C94F5;  
background-blend-mode: exclusion;

Hue

Supongo que no todas las mezclas pueden salir bien.

background-color: #0C94F5;  
background-blend-mode: hue;

Saturation

background-color: #0C94F5;  
background-blend-mode: saturation;

Color

background-color: #0C94F5;  
background-blend-mode: color;

Luminosity

background-color: #0C94F5;  
background-blend-mode: luminosity;

También puedes usar degradados.

Hard-light con degradado

background-image: linear-gradient(to right, #0C94F5, #B234E9), url(imagen.jpg);  
background-blend-mode: hard-light;

Difference con degradado

background-image: linear-gradient(to right, #6DC42A, #ED3A7E), url(imagen.jpg);  
background-blend-mode: difference;

Woooooow!!!

Incluso puedes combinar dos imágenes (con o sin color):

background-image: url(imagen.jpg), url(imagen2.jpg);  
background-color: #0C94F5;  
background-blend-mode: hard-light;