Blending modes

facebook-svg gplus-svg twitter-svg

Nota: Los los modos de fusión de CSS3 son una tecnología experimental. Por favor consulte el soporte en los navegadores de esta propiedad.

En imágenes digitales los modos de fusión ( blend modes ) son utilizados para determinar como se fusionan dos capas. El modo de fusión por defecto en la mayoría de aplicaciones, simplemente esconde la capa inferior ( de destino ). ┬áSin embargo, como que el color de cada pixel tiene un valor numérico, hay un gran número de posibles combinaciones.

En Photoshop, por ejemplo, para fusionar capas podemos utilizar Layer > Layer Style > Blending Options o en español: Capa > Estilos de Capa > Opciones de fusión.

Phptoshop blending options

La propiedad background-blend-mode

En CSS3 podemos utilizar background-blend-mode para combinar dos imágenes de fondo, o una imagen y un color.

Para cada píxel, el color del elemento ( el color de origen o source color ) se combina o se fusiona ( is blended ) con el color del fondo ( the backdrop ) para crear un nuevo color.

Por ejemplo el modo de fusión lighten ( aclarar ) selecciona el color más claro entre el color de origen y el color de fondo.

A continuación utilizamos como background del elemento <div class="lighten"> dos imágenes: una imagen JPEG: url(images/enfeinada240.jpg) y un gradiente lineal: linear-gradient(#F06 0%, #000 100%).
Para aplicarle un modo de fusión lighten utilizamos la propiedad background-blend-mode. Y no, no necesita prefijos.

.lighten {
   background: url(images/enfeinada240.jpg), linear-gradient(#F06 0%, #000 100%);
   background-blend-mode: lighten;
}

linear-gradient

images/enfeinada240.jpg

<div class="lighten">


.fusionado {
	width:240px;
	height:240px;
	background: url(images/enfeinada240.jpg);
}
.fusionado.gradient{
    background: linear-gradient(#F06 0%, #000 100%);}

.fusionado.lighten{
	 background: url(images/enfeinada240.jpg), linear-gradient(#F06 0%, #000 100%);
	 background-blend-mode: lighten;
  }

linear-gradient

images/enfeinada240.jpg

<div class="lighten">

En CSS3 hay varios modos de fusión: color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, overlay, saturation, screen, soft-light
También existe normal, que es el valor por defecto. En este caso un modo de fusión normal deja visible solo la flor, o sea la imagen que está encima.

Los varios modos de fusión

A continuación utilizamos el mismo gradiente y la misma imagen de antes, y los combinamos utilizando varios modos de fusión.

color

color-burn

color-dodge

darken

difference

exclusion

hard-light

hue

lighten

luminosity

multiply

overlay

saturation

screen

soft-light


.container p{ text-align:center; font-style: italic; font-family: serif;}
.container{ margin:10px; float:left;}
.blended {
	width:240px;
	height:240px;
    background: url(images/enfeinada240.jpg), linear-gradient(#F06 0%, #000 100%);
}.color{background-blend-mode: color;}
.color-burn{background-blend-mode: color-burn;}
.color-dodge{background-blend-mode: color-dodge;}
.darken{background-blend-mode: darken;}
.difference{background-blend-mode: difference;}
.exclusion{background-blend-mode: exclusion;}
.hard-light{background-blend-mode: hard-light;}
.hue{background-blend-mode: hue;}
.lighten{background-blend-mode: lighten;}
.luminosity{background-blend-mode: luminosity;}
.multiply{background-blend-mode: multiply;}
.overlay{background-blend-mode: overlay;}
.saturation{background-blend-mode: saturation;}
.screen{background-blend-mode: screen;}
.soft-light{background-blend-mode: soft-light;}

color

color-burn

color-dodge

darken

difference

exclusion

hard-light

hue

lighten

luminosity

multiply

overlay

saturation

screen

soft-light

Una aplicación para entender mejor la propiedad background-blend-mode ( Codepen )

La propiedad mix-blend-modes

A veces necesitamos fusionar dos imágenes, o dos elementos distintos. Para esto utilizamos la propiedad mix-blend-modes, que describe cómo deben fusionarse el contenido de un elemento con el contenido del elemento subyacente.

Los valores que puede tomar propiedad mix-blend-modes son los mismos valores que puede tomar la propiedad background-blend-modes: color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, overlay, saturation, screen, soft-light. También existe normal, que es el valor por defecto.

En este experimento en Codepen un <div> de color azul ( #abcdef ) se encuentra posicionado absolute encima de una imagen que ocupa toda la pantalla.
El valor que toma la propiedad mix-blend-mode es difference; Al pasar con el ratón por encima del div ( hover ) lo podemos arrastrar allá donde queramos.

Una aplicación para entender mejor la propiedad mix-blend-mode ( Codepen )