– CSS: Hojas de Estilo en Cascada / MDN

normal

El color final es el color superior, independientemente de cuál sea el color inferior.
El efecto es como dos piezas de papel opacas superpuestas.

multiply

El color final es el resultado de multiplicar los colores superior e inferior.
Una capa negra conduce a una capa final negra, y una capa blanca conduce a ningún cambio.
El efecto es como dos imágenes impresas en película transparente superpuesta.

screen

El color final es el resultado de invertir los colores, multiplicarlos e invertir ese valor.
Una capa negra no lleva a ningún cambio, y una capa blanca conduce a una capa final blanca.
El efecto es como dos imágenes que brillan en una pantalla de proyección.

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 fusión es equivalente a hard-light pero con las capas intercambiadas. darken

El color final se compone de los valores más oscuros de cada canal de color.

lighten

El color final se compone de los valores más claros de cada canal de color.

color-dodge

El color final es el resultado de dividir el color inferior por el inverso del color superior.
Un primer plano negro no produce cambios. Un primer plano con el color inverso del fondo conduce a un color completamente iluminado.
Este modo de fusión es similar a screen, pero el primer plano solo necesita ser tan claro como el inverso del telón de fondo para crear un color completamente iluminado.

color-burn

El color final es el resultado de invertir el color inferior, dividir el valor por el color superior e invertir ese valor.
Un primer plano blanco no produce cambios. Un primer plano con el color inverso del fondo conduce a una imagen final negra.
Este modo de fusión es similar a multiply, pero el primer plano solo necesita ser tan oscuro como el inverso del telón de fondo para que la imagen final sea 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 claro.
Este modo de fusión es equivalente a overlay pero con las capas intercambiadas.
El efecto es similar a brillar con un foco duro en el telón de fondo.

soft-light

El color final es similar a hard-light, pero más suave.
Este modo de fusión se comporta de forma similar a hard-light.
El efecto es similar al brillo de un foco difuso en el telón de fondo.

difference

El color final es el resultado de restar el más oscuro de los dos colores del más claro.
Una capa negra no tiene efecto, mientras que una capa blanca invierte el color de la otra capa.

exclusion

El color final es similar a difference, pero con menos contraste.
Al igual que con difference, una capa negra no tiene efecto, mientras que una capa blanca invierte el color de la otra capa.

hue

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

saturation

El color final tiene la saturación del color superior, mientras utiliza el tono y la luminosidad del color inferior.
Un fondo gris puro, sin saturación, no tendrá efecto.

color

El color final tiene el tono y la saturación del color superior, mientras utiliza la luminosidad del color inferior.
El efecto conserva los niveles de gris y se puede usar para colorear el primer plano.

luminosity

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.