isolation y el grupo de fusión

La pregunta que mix-blend-mode deja abierta es contra qué se fusiona. La respuesta no es “contra lo que hay detrás” sino algo más acotado y más útil: contra el backdrop dentro de su grupo de aislamiento. Saber dónde están las fronteras de ese grupo, y que hay media docena de propiedades que las crean sin avisar, es la diferencia entre controlar una fusión y pelearse con ella.

Contra qué se fusiona un elemento

Un elemento con mix-blend-mode se fusiona con su backdrop, que es todo lo pintado por debajo de él dentro del contexto de apilamiento que lo contiene. Ese contexto actúa como un grupo aislado: el contenido del grupo se compone entre sí primero, y el resultado se compone después con lo de fuera sin fusionarse.

Dicho al revés: una fusión nunca atraviesa la frontera de un contexto de apilamiento. Un elemento con multiply dentro de un contenedor que forme contexto de apilamiento se multiplica con sus hermanos y con el fondo de ese contenedor, y no con el fondo de la página.

Ese es el mecanismo entero, y de él salen los dos problemas de siempre: la fusión llega demasiado lejos, o no llega a ninguna parte.

Acotar una fusión

isolation: isolate crea un contexto de apilamiento sin ningún otro efecto secundario. Es la herramienta para el primer problema.

<div class="tarjeta">
  <img src="foto.avif" alt="">
  <div class="tinte"></div>
</div>

.tarjeta {
  position: relative;
  isolation: isolate;
}

.tinte {
  position: absolute;
  inset: 0;
  background: oklch(55% 0.15 264);
  mix-blend-mode: color;
}

Sin isolation: isolate, el tinte se fusiona con todo lo que tenga debajo en el contexto de apilamiento vigente, que puede ser la página entera: al pasar por encima del borde de la tarjeta seguiría tiñendo lo que hubiera detrás. Con el aislamiento, la fusión se detiene en la tarjeta.

El valor por defecto es isolation: auto, que significa “aísla solo si alguna otra cosa ya lo hacía”.

Comparado con las alternativas para conseguir lo mismo, isolation es la única que no arrastra nada más. position: relative con z-index: 0 también crea contexto de apilamiento, y además cambia el posicionamiento. transform: translateZ(0) también, y además crea bloque contenedor y promociona una capa. opacity: 0.999 también, y además es una mentira que alguien borrará. isolation: isolate dice exactamente lo que hace.

Las propiedades que aíslan sin que lo pidas

El segundo problema —“he puesto multiply y no hace nada”— casi siempre es un contexto de apilamiento que alguien creó sin darse cuenta, y la lista de formas de crear uno es larga:

• opacity menor que 1
• transform, rotate, scale, translate distintos de none
• filter, backdrop-filter
• mix-blend-mode distinto de normal
• clip-path, mask
• perspective, transform-style: preserve-3d
• contain: paint, contain: layout y content-visibility
• will-change con cualquiera de las propiedades anteriores
• position: fixed, y position: sticky en la mayoría de los motores
• position: relative o absolute con z-index distinto de auto
• isolation: isolate
• Un elemento en la capa superior, como un dialog abierto o un popover

Cualquiera de esas en un ancestro corta la fusión ahí. Las que más aparecen por accidente son transform, puesta para centrar algo o para animar, will-change, puesta por rendimiento, y contain, puesta al aislar un componente.

El diagnóstico es mecánico: sube por el árbol desde el elemento que se fusiona hasta el que quieres que sea el fondo, y comprueba en el inspector si algún ancestro intermedio tiene alguna de esas propiedades. La que encuentres es la culpable.

El caso completo

Los dos usos se combinan en el patrón que más se repite: una imagen con un tinte de marca dentro de una tarjeta con una superposición de texto que también se fusiona, pero con otro alcance.

.tarjeta {
  position: relative;
  isolation: isolate;      /* frontera exterior de la fusion */
  overflow: hidden;
  border-radius: 16px;
}

.tarjeta > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.tarjeta > .tinte {
  position: absolute;
  inset: 0;
  background: oklch(50% 0.14 264);
  mix-blend-mode: color;   /* se fusiona con la imagen, no con la pagina */
}

.tarjeta > .titulo {
  position: relative;      /* por encima del tinte, sin fusionarse */
  z-index: 1;
  color: #ffffff;
}

El título lleva z-index: 1 y position: relative, con lo que también crea contexto de apilamiento y por tanto queda fuera del alcance del tinte y no se tiñe. Ese detalle es el que hace que el patrón funcione, y es también la demostración de que la lista de arriba no es solo una fuente de problemas: se usa a propósito.