Propiedad CSS mix-blend-mode
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.
TIP
Si quieres mezclar entre sí las imágenes de fondo de un elemento, puedes usar la propiedad background-blend-mode.
| Initial Value | normal |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.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="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>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="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>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="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>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="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>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="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>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="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>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="https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Valores
| Value | Description |
|---|---|
| normal | Establece el modo de mezcla en normal. Este es el valor predeterminado de esta propiedad. |
| multiply | Establece el modo de mezcla en multiply. |
| screen | Establece el modo de mezcla en screen. |
| overlay | Establece el modo de mezcla en overlay. |
| darken | Establece el modo de mezcla en darken. |
| lighten | Establece el modo de mezcla en lighten. |
| color-dodge | Establece el modo de mezcla en color-dodge. |
| color-burn | Establece el modo de mezcla en color-burn. |
| exclusion | Establece el modo de mezcla en exclusion. |
| difference | Establece el modo de mezcla en difference. |
| hue | Establece el modo de mezcla en hue. |
| saturation | Establece el modo de mezcla en saturation. |
| color | Establece el modo de mezcla en color. |
| luminosity | Establece el modo de mezcla en luminosity. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad del elemento padre. |
Practice
Which of the following browser versions do not support the CSS mix-blend-mode property?