Propiedad background-blend-mode

La propiedad background-blend-mode establece el modo de fusión de la imagen de fondo con el color de fondo u otras imágenes. En esta propiedad también se pueden especificar varios valores separados por comas, que se aplicarán en el mismo orden. Los valores para la propiedad son análogos a los modos principales de los editores gráficos.

Sintaxis

cssselector {
  background-blend-mode: modos;
}

En la tabla se presentan los valores principales para la propiedad background-blend-mode:

Valores

Valor	Descripción
`normal`	Normal. No se utiliza mezcla de colores. Modo por defecto.
`multiply`	Multiplicación. En este modo el valor del color base se multiplica por el valor del color de fusión. El color resultante siempre es un color más oscuro.
`screen`	Pantalla. En este modo se multiplican los valores invertidos del color base y del color de fusión. Como color resultante siempre se aplica un color más claro.
`overlay`	Superposición. En este modo los colores se multiplican o aclaran en función del color base. Los patrones o colores superponen los píxeles existentes, dejando inalteradas las áreas claras y oscuras del color base.

Ejemplo

Veamos cómo se verá la imagen con el valor por defecto de la propiedad background-blend-mode:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Y ahora cambiemos el valor de la propiedad background-blend-mode a multiplicación:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ejemplo

Establezcamos para nuestra imagen el modo pantalla:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Véase también

la propiedad background,
que es una propiedad abreviada para el fondo
la propiedad background-image,
con la que se puede asignar una imagen de fondo a un bloque
la propiedad mix-blend-mode,
con la que se pueden fusionar colores fuente con la imagen de fondo
la propiedad backdrop-filter,
que permite aplicar filtros