Característica background-blend-mode en CSS

por
Característica background-blend-mode en CSS

Una propiedad background-attachment en CSS que describe cómo las imágenes de fondo deben combinarse y con el color de fondo especificado para el elemento.

Debe definir los patrones de mezcla (modos de fusión) en el mismo orden de recepción de imágenes en la propiedad background-image. Si la lista de valores para ambas propiedades no tiene la misma longitud, algunos valores se iterarán o eliminarán hasta que sean iguales.

Tenga en cuenta que si usamos la propiedad background abreviada, restablecerá el valor de la propiedad background-blend-mode a su valor predeterminado, así que asegúrese de usar esta propiedad después.

Funciones background blend mode en css

Valor inicialnormal
Aplicado aTodos los artículos.
HeredableNo
MóvilNo
Valor calculadoComo el valor especificado.
/* valor único */
background-blend-mode: normal;
/* dos valores, cada uno siguiendo una imagen de fondo diferente */
background-blend-mode: darken, luminosity;
/* valores globales */ 
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

Ejemplos y aplicaciones

Este es un ejemplo interactivo que le permite elegir cualquiera de los modos de fusión y el resultado aparecerá de inmediato. 

Código HTML:

Asegúrese de proporcionar dos imágenes con el nombre image-1.png y image-2.png para que el ejemplo funcione. 

Código CSS:

#div {
  width: 300px;
  height: 300px;
  background: url('image-1.png'), url('image-2.png');
  background-blend-mode: screen;
}

El código JavaScript responsable de modificar el patrón de fusión al seleccionar el valor de un elemento