View Transition Isolation Demo

观察两种结构下，当子元素使用 mix-blend-mode: plus-lighter 时，容器的红色背景是否干扰混合。

Scenario 1: Separate Group and Image Pair (Correct Way)

Old
(Blue, 50% Alpha)
plus-lighter
New
(Yellow, 50% Alpha)
plus-lighter
说明:
  1. .image-pair (蓝色边框) 设置了 isolation: isolate，创建了一个独立的混合环境。
  2. .old (半透明蓝) 使用 plus-lighter 混合，但其下方在隔离环境内无内容，因此视觉上主要是自身颜色。
  3. .new (半透明黄) 使用 plus-lighter 混合，它与其下方的 .old 在隔离环境内进行混合。
  4. 关键: 这个混合过程完全发生在 .image-pair 内部，外部 .group 的纯红色背景不参与混合计算。混合结果 (明亮的青/白色) 清晰地呈现在红色背景之上，此时你几乎看不到红色背景。

Scenario 2: Combined Element Simulating Group/Image Pair (Problematic)

Old
(Blue, 50% Alpha)
plus-lighter
New
(Yellow, 50% Alpha)
plus-lighter
说明:
  1. 这个 div (红色边框) 具有 .group 类的纯红色背景，但**没有**设置 isolation: isolate。
  2. .old (半透明蓝) 使用 plus-lighter 混合。由于没有隔离层，它直接与其容器（即这个 div）的纯红色背景混合。
  3. .new (半透明黄) 使用 plus-lighter 混合。它与其下方的所有内容混合，即步骤2中（.old + 红色背景）的混合结果。
  4. 关键: 元素的混合直接受到了其容器背景色的“污染”。最终颜色是红色背景、半透明蓝色和半透明黄色通过 `plus-lighter` 叠加的结果，颜色非常亮且与场景1明显不同。这展示了缺乏隔离层时混合效果如何变得不可预测和混乱。