W3docs
es
Iniciar sesión

Propiedad CSS mix-blend-mode

The mix-blend-mode CSS property sets the blending of background-images or background-colors. Read about the values and try examples.

La propiedad mix-blend-mode define la mezcla del contenido del elemento con el fondo de su elemento padre directo. Necesitas tener background-image, background-color o un <img> para mezclarlo.

En CSS, hay 16 modos de fusión disponibles. Si se establece en un elemento un valor distinto de “normal” (valor predeterminado), se creará un nuevo contexto de apilamiento en ese elemento. El grupo recién formado debe mezclarse entonces con el contexto de apilamiento que contiene el elemento. El elemento no se mezclará con el contenido que esté fuera del contexto de apilamiento.

Cualquier propiedad que provoque la creación de un contexto de apilamiento puede afectar a la mezcla.

Puedes usar la propiedad isolation para aislar un elemento.

success

Si quieres mezclar entre sí las imágenes de fondo de un elemento, puedes usar la propiedad background-blend-mode.

Initial Valuenormal
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS1
DOM Syntaxobject.style.mixBlendMode = "exclusion";

Sintaxis

Sintaxis de la propiedad CSS mix-blend-mode

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Ejemplo de la propiedad mix-blend-mode:

Ejemplo de la propiedad CSS mix-blend-mode con el valor multiply

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "screen":

Ejemplo de la propiedad CSS mix-blend-mode con el valor screen

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "color-dodge":

Ejemplo de la propiedad CSS mix-blend-mode con el valor color-dodge

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "hue":

Ejemplo de la propiedad CSS mix-blend-mode con el valor hue

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad mix-blend-mode con el valor "normal":

Propiedad CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de mix-blend-mode con el valor "hard-light":

Propiedad CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de mix-blend-mode con el valor "difference":

Propiedad CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValueDescription
normalEstablece el modo de mezcla en normal. Este es el valor predeterminado de esta propiedad.
multiplyEstablece el modo de mezcla en multiply.
screenEstablece el modo de mezcla en screen.
overlayEstablece el modo de mezcla en overlay.
darkenEstablece el modo de mezcla en darken.
lightenEstablece el modo de mezcla en lighten.
color-dodgeEstablece el modo de mezcla en color-dodge.
color-burnEstablece el modo de mezcla en color-burn.
exclusionEstablece el modo de mezcla en exclusion.
differenceEstablece el modo de mezcla en difference.
hueEstablece el modo de mezcla en hue.
saturationEstablece el modo de mezcla en saturation.
colorEstablece el modo de mezcla en color.
luminosityEstablece el modo de mezcla en luminosity.
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad del elemento padre.

Practice

Práctica

Which of the following browser versions do not support the CSS mix-blend-mode property?