Propiedad mix-blend-mode

La propiedad mix-blend-mode establece el modo de fusión del color de origen sobre el color de fondo o la imagen de fondo. Los valores para la propiedad son análogos a los modos principales de los editores gráficos.

Sintaxis

cssselector {
  mix-blend-mode: valores;
}

En la tabla se presentan los valores principales para la propiedad mix-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 primario se multiplica por el valor del color superpuesto. El color resultante es siempre un color más oscuro.
`screen`	Trama. En este modo se multiplican los valores invertidos del color primario y del color superpuesto. Como color resultante se aplica siempre un color más claro.
`overlay`	Superponer. En este modo los colores se multiplican o aclaran en función del color primario. Los patrones o colores superponen los píxeles existentes, dejando inalteradas las áreas claras y oscuras del color primario.

Ejemplo

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

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Ejemplo

Y ahora cambiemos el modo de fusión a multiplicación:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Ejemplo

Establezcamos el valor de superponer para la propiedad mix-blend-mode:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Véase también

la propiedad background,
que es una propiedad abreviada para el fondo
la propiedad background-image,
con la que se puede establecer una imagen de fondo para un bloque
la propiedad background-blend-mode,
con la que se puede superponer una imagen de fondo sobre un color de fondo