Los filtros CSS están muy bien en multitud de situaciones, pero hay casos en los que se nos pueden quedar cortos. Los modos de fusión son un interesante añadido que aparece en CSS para dotar de otra característica muy común en los programas de diseño y edición de imagen: la fusión de dos elementos sumando la información de color de los píxeles de cada uno de ellos.
Propiedades de fusión
Mediante las propiedades mix-blend-mode y background-blend-mode podemos utilizar modos de fusión en los diferentes elementos que seleccionemos en una página web, aplicando composición para mezclar los colores, superponiendo dos elementos, consiguiendo una variación como resultado final.
Dichas propiedades son las siguientes:
| Propiedad | Valor | Significado |
|---|---|---|
mix-blend-mode | normal | | Aplica un modo de fusión a un elemento con todo lo que hay debajo. |
background-blend-mode | normal | | Aplica un modo de fusión sólo a los fondos background. |
isolation | auto | isolate | Establece si un elemento debe aislarse del resto. |
La diferencia entre ambas propiedades es que la primera de ellas, mix-blend-mode, se utiliza para elementos, mientras que la segunda, background-blend-mode, se utiliza para aplicar modos de fusión en fondos.
Veamos un ejemplo de ambas:
.container {
display: flex;
width: 450px;
height: 150px;
background: deeppink;
}
img.blend {
mix-blend-mode: multiply;
}
.backblend {
width: 150px;
height: 150px;
background: url("cat.jpg");
background-color: red;
background-blend-mode: multiply;
}
<div class="container">
<img src="cat.jpg" alt="cat">
<img class="blend" src="cat.jpg" alt="cat">
<div class="backblend"></div>
</div>
Modos de fusión
Entre los diferentes modos de fusión
| Filtro | |||
|---|---|---|---|
multiply | screen | overlay | darken |
lighten | color-dodge | color-burn | hard-light |
soft-light | difference | exclusion | hue |
saturation | color | luminosity | normal |
Ejemplos de modos de fusión
Si no tenemos ningún modo de fusión aplicado, el valor por defecto de la propiedad es normal. Como ejemplo, a continuación tenemos una imagen de nuestro pato AntiTailwind aplicado con un modo de fusión sobre un fondo morado (indigo). Puedes seleccionar el modo de fusión para ver el resultado:
Nota: Lo mismo que hemos hecho en el ejemplo anterior con una imagen y un color de fondo, se podría hacer con 2 o varias imágenes.
