Modos de fusión
background-blend-mode:
La propiedad background-blend-mode establece cómo las imágenes de fondo de un elemento deben combinarse entre sí con el color de fondo del elemento.
mix-blend-mode:
Los modos de fusión describen cómo deben aparecer los colores cuando los elementos se superponen.
Valores:
- normal:
- El color final es el color superior, independientemente del color inferior. El efecto es como dos trozos de papel opaco superpuestos.
- 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 no produce ningún cambio. El efecto es como dos imágenes superpuestas impresas en una película transparente.
- screen:
- El color final es el resultado de invertir los colores, multiplicarlos e invertir ese valor. Una capa negra conduce a ningún cambio y una capa blanca conduce a una capa final blanca. El efecto es como dos imágenes proyectadas en una pantalla de proyección.
- overlay:
- El color final es el resultado de multiply si el color de fondo es más oscuro o screen si el color de fondo 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 de abajo por el inverso del color de arriba. Un primer plano negro no conduce a ningún cambio. 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 fondo para crear un color totalmente 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 conduce a ningún cambio. Un primer plano con el color inverso del fondo conduce a una imagen final en negro. Este modo de fusión es similar a multiply, pero el primer plano solo necesita ser tan oscuro como el inverso del fondo para que la imagen final sea negra.
- hard-light:
- El color final es el resultado de multiplysi el color superior es más oscuro o screensi el color superior es más claro. Este modo de fusión es equivalente a overlaypero con las capas intercambiadas. El efecto es similar a iluminar con un foco duro el telón de fondo.
- soft-light:
- El color final es similar al hard-light, pero más suave. El efecto es similar al de una luz difusa sobre el fondo.
- difference:
- El color final es el resultado de restar el más oscuro de los dos colores al más claro. Una capa negra no tiene ningún 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 ningún efecto, mientras que una capa blanca invierte el color de la otra capa.
- hue:
- El color final tiene la tonalidad del color superior, mientras que utiliza la saturación y la luminosidad del color inferior.
- saturation:
- El color final tiene la saturación del color superior, mientras usa el matiz y la luminosidad del color inferior. Un fondo gris puro, sin saturación, no tendrá ningún efecto.
- color:
- El color final tiene el matiz y la saturación del color superior, mientras usa la luminosidad del color inferior. El efecto conserva los niveles de gris y se puede utilizar para colorear el primer plano.
- luminosity:
- El color final tiene la luminosidad del color superior, mientras usa el tono y la saturación del color inferior. Este modo de fusión es equivalente a color, pero con las capas intercambiadas.
Ejemplos:
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity