<blend-mode>

Resumen

El tipo <blend-mode> es una coleccion de palabras clave que describen modos de mezcla.

Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.

Sintaxis

Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Valores posibles

normal

El color final es el de la capa superior, sin importar el color de fondo.
El efecto es similar a dos trozos de papel sobrepuestos.

multiply

El color final es el resultado de multiplicar el color superior y el inferior.
Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.
El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.

screen

El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.
Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.
El efecto es similar a dos imágenes mostrándose desde un proyector.

overlay
El color final es el resultado de multiply si el color inferior es más oscuro, o screen si el color inferior es más claro.
Este modo de mezcla es equivalente a hard-light, pero si las capas son intercambiadas.

darken

El resultado final es un color compuesto de los valores más oscuros por cada canal de color.

lighten

El resultado final es un color compuesto de los valores más claros por cada canal de color.

color-dodge

El color final es el resultado de dividir el color inferior por el inverso del color superior.
Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.
Este modo de mezcla es similar a screen, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.

color-burn

El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.
Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.
Este modo de mezcla es similar a multiply, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.

hard-light

El color final es el resultado de multiply si el color superior es más oscuro, o screen si el color superior es más oscuro.
Este modo de mezcla es equivalente a overlay, pero con las capas intercambiadas.
El efecto es similar a encender un foco con mucha intensidad en el fondo.

soft-light

El color final es similar a hard-light, pero más suave.
Este modo de mezcla se comporta similar a hard-light.
El efecto es similar a encender un foco difuso en el fondo.

difference

El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.
Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

exclusion

El color final es similar a difference, pero con menor contraste.
Así como con difference,  una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

hue

El color final tiene el matiz del color superior, mientras usa la saturación y luminosidad del color inferior.

saturation

El color final tiene la saturación del color superior, mientras usa el matiz y luminosidad del color inferior.
Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.

color

El color final tiene el matiz y saturación del color superior, mientras usa la luminosidad del color inferior.
El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.

luminosity

El color final tiene la luminosidad del color superior, mientras usa el matiz y saturación del color inferior.
Este modo de mezcla es equivalente a color, pero con las capas intercambiadas.

Interpolación de modos de mezcla

 

Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.

Especificaciones

Especificación Estado Comentarios
Compositing and blending Level 1
The definition of '<blend-mode>' in that specification.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 35 (Yes) ? ? ?
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? ? (Yes) ? ? ?

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,