Atributo mix-blend-mode de CSS

Definición y uso

La propiedad mix-blend-mode especifica cómo el contenido del elemento debe mezclarse con el fondo de su padre directo.

Véase también:

Manual de referencia de CSS:Atributo background-blend-mode CSS

Ejemplo

Un contenedor con fondo rojo y una imagen fusionada con este contenedor rojo (oscurecido):

.container {
  background-color: rojo;
}
.container img {
  mix-blend-mode: oscurecer;
}

Prueba personalmente

Puede encontrar más ejemplos de TIY en la parte inferior de la página.

Sintaxis de CSS

mix-blend-mode: normal|multiplicar|pantalla|superponer|oscurecer|iluminar|deslizar-color|quemar-color|diferencia|exclusión|tono|saturación|color|luminosidad;

Valor del atributo

Valores Descripción
normal Este es el valor predeterminado. Establezca el modo de mezcla en normal.
multiplicar Establezca el modo de mezcla en multiplicar.
pantalla Establezca el modo de mezcla en pantalla.
superponer Establezca el modo de mezcla en superponer.
oscurecer Establezca el modo de mezcla en oscurecer.
iluminar Establezca el modo de mezcla en iluminar.
deslizar-color Establezca el modo de mezcla en deslizar-color.
quemar-color Establezca el modo de mezcla en quemar-color.
diferencia Establezca el modo de mezcla en diferencia.
exclusión Establezca el modo de mezcla en exclusión.
tono Establezca el modo de mezcla en tono.
saturación Establezca el modo de mezcla en saturación.
color Establezca el modo de mezcla en color.
luminosidad Establezca el modo de mezcla en luminosidad.

Detalles técnicos

Valor predeterminado: normal
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Sintaxis de JavaScript: object.style.mixBlendMode = "darken"

Más ejemplos

Ejemplo

Muestra todos los valores:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Prueba personalmente

Ejemplo

Usar mix-blend-mode para crear texto con cutout/knockout responsivo (textura de recorte):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que completamente admite esta propiedad.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0