Ver soporte

Normalmente, para tener algunos efectos en imágenes o textos en la web, antes tenemos que pasar por algún software como Photoshop y así lograr nuestro objetivo, pero esto está cambiando a medida que CSS3 avanza, pues ya podemos ver efectos como los filtros, mascaras e incluso mezclas (tema que vamos a ver a continuación), esto es algo bastante normal ya que en la web igual se suele trabajar con vectores, imágenes, colores, textos, etc.

¿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;  

blend-mode multiply

Screen

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

blend-mode screen

Overlay

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

blend-mode overlay

Darken

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

blend-mode darken

Lighten

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

blend-mode lighten

Color-dodge

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

blend-mode dodge

Color-burn

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

blend-mode burn

Hard-light

Una de mis mezclas favoritas.

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

blend-mode hard-light

Soft-light

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

blend-mode soft-light

Difference

Wooow!

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

blend-mode diggerence

Exclusion

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

blend-mide exclusion

Hue

Supongo que no todas las mezclas pueden salir bien.

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

blend-mode hue

Saturation

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

blend-mode saturation

Color

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

blend-mode color

Luminosity

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

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;  

blend-mode hard-light-gradient-hard-light

Difference con degradado

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

blend-mode gradient-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;  

blend-mode two-hard-light

¿Bonito, no?, ahora imagina las múltiples cosas que puedes realizar con todas estas combinaciones, por cierto te dejo un ejemplo para que tu mismo veas lo increíble que es esta propiedad: