如何让mix-blend-mode忽略红色条纹背景，仅对绿色条纹生效？

下面提供两种可行的实现方式，分别适配静态固定条纹和动态场景：

方式一：纯CSS双元素分层（适配固定位置条纹） #

如果红色、绿色条纹的位置是固定的，可以用两个完全重叠的蓝色矩形，分别控制它们的显示区域和混合模式：

• 第一个蓝色矩形设置mix-blend-mode: difference，用clip-path裁剪出仅覆盖绿色条纹的区域，确保只在绿色区域生效混合效果。
• 第二个蓝色矩形保持默认normal混合模式（即不混合），用clip-path裁剪出仅覆盖红色条纹的区域，保证在红色区域上显示原本的蓝色。
• 将两个矩形完全重叠定位，视觉上就是一个完整的蓝色矩形，且在不同区域自动应用对应规则。

示例代码：

/* 基础样式：两个蓝色矩形共享的样式 */
.blue-rect {
  position: absolute;
  width: 200px;
  height: 80px;
  background: blue;
  left: 50%;
  transform: translateX(-50%);
}

/* 负责绿色区域混合的矩形 */
.blue-rect--blend {
  mix-blend-mode: difference;
  /* 假设绿色条纹范围是距离顶部300px到400px，裁剪出对应区域 */
  clip-path: inset(300px 0 0 0);
}

/* 负责红色区域显示原始蓝色的矩形 */
.blue-rect--normal {
  /* 假设红色条纹范围是距离顶部100px到200px，裁剪出对应区域 */
  clip-path: inset(100px 0 300px 0);
}

方式二：JavaScript动态切换混合模式（适配动态移动/可变条纹） #

如果条纹位置不固定，或者蓝色矩形的移动路径是动态的，可以通过监听位置判断重叠状态，实时切换混合模式：

• 监听蓝色矩形的位置，判断它是否和红色条纹重叠。
• 重叠时将混合模式设为normal（保持蓝色），不重叠时恢复difference（正常混合绿色）。

示例代码：

const blueBox = document.querySelector('.blue-box');
const redStrip = document.querySelector('.red-strip');

// 判断元素是否重叠的函数
function isOverlap(rect1, rect2) {
  return rect1.bottom > rect2.top && rect1.top < rect2.bottom;
}

// 检查并切换混合模式
function updateBlendMode() {
  const boxRect = blueBox.getBoundingClientRect();
  const stripRect = redStrip.getBoundingClientRect();
  
  blueBox.style.mixBlendMode = isOverlap(boxRect, stripRect) ? 'normal' : 'difference';
}

// 模拟蓝色矩形向上移动的动画
function animateBox() {
  let currentTop = parseInt(window.getComputedStyle(blueBox).top) || 500;
  currentTop -= 1;
  blueBox.style.top = `${currentTop}px`;
  
  updateBlendMode();
  
  // 限制移动范围，超出后停止动画
  if (currentTop > -100) {
    requestAnimationFrame(animateBox);
  }
}

// 启动动画
animateBox();

内容的提问来源于stack exchange，提问作者Aaspreet