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 inicial	`normal`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como 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:

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

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 <select>:

document.getElementById("select").onchange = function(event) {
    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
}

Soporte de navegadores

Característica	Cromo	Firefox	IE	Ópera	Safari
Soporte principal	35	30,0	No soportado	22	7.1

Estructura general

<blend-mode>

Modo de mezcla <blend-mode> que especifica qué modo de fusión usar.

Estructura formal

background-blend-mode: <blend-mode>#;

Los valores se pueden repetir para aplicarlos a más de una coma separándolos con una coma (,).

<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light 
| soft-light | difference | exclusion | hue | saturation | color | luminosity

Vea también

Propiedades de página tomadas por la propiedad de acceso directo background: el background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size y background-attachment.
La página del elemento <img> que se utiliza para agregar imágenes al documento.
Para agregar un color en lugar de una imagen, use el background-color.
Consulte la página de Patrones de fusión <blend-mode> para obtener más detalles.