如何使mix-blend-mode:difference文本仅显示不透明黑白色？

需求与问题 #

• 需求：文本在黑色div上显示白色，白色背景上显示黑色；窗口调整时，黑白区域随黑色div和图片的位置同步变化
• 当前问题：使用mix-blend-mode: difference实现了基础变色效果，但文本覆盖图片时会因图片色彩干扰变得透明/变色，需让图片上的文本保持纯黑色

解决方案思路 #

通过双层文本叠加+CSS遮罩实现：

1. 第一层文本应用mix-blend-mode: difference，仅在非图片区域显示，实现黑白背景下的变色效果
2. 第二层文本设置为纯黑色，仅在图片区域显示，覆盖图片上的混合模式文本

代码修改示例 #

React组件结构 #

import React from 'react';

const ArtGallery = () => {
  return (
    <div className="page-container">
      {/* 黑色背景区块 */}
      <div className="black-block"></div>
      {/* 展示图片 */}
      <img 
        src="your-image-url.jpg" 
        alt="Gallery Art" 
        className="gallery-image"
      />
      {/* 文本容器：包含双层文本 */}
      <div className="text-wrapper">
        <h1 className="blend-text">Modern Art Gallery</h1>
        <h1 className="image-only-text">Modern Art Gallery</h1>
      </div>
    </div>
  );
};

export default ArtGallery;

CSS样式实现 #

.page-container {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
}

.black-block {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #000;
}

.gallery-image {
  position: absolute;
  right: 0;
  top: 20%;
  width: 50%;
  height: 60%;
  object-fit: cover;
}

.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 确保文本层级独立 */
  isolation: isolate;
}

/* 混合模式文本：仅在非图片区域显示 */
.blend-text {
  color: #fff;
  mix-blend-mode: difference;
  position: absolute;
  top: 0;
  left: 0;
  /* 遮罩排除图片区域（需匹配图片的位置/尺寸） */
  mask: linear-gradient(#fff, #fff) 
        calc(100vw / 2) 20% / 50% 60% 
        no-repeat;
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff, #fff) 
                calc(100vw / 2) 20% / 50% 60% 
                no-repeat;
  -webkit-mask-composite: xor;
}

/* 纯黑文本：仅在图片区域显示 */
.image-only-text {
  color: #000;
  /* 遮罩仅保留图片区域 */
  mask: linear-gradient(#fff, #fff) 
        calc(100vw / 2) 20% / 50% 60% 
        no-repeat;
  -webkit-mask: linear-gradient(#fff, #fff) 
                calc(100vw / 2) 20% / 50% 60% 
                no-repeat;
}

关键说明 #

• 遮罩的calc(100vw / 2) 20% / 50% 60%需要匹配图片的位置和尺寸，确保精准覆盖图片区域
• 如果图片位置/尺寸是动态变化的（比如响应式调整），可以用JavaScript监听窗口 resize 事件，动态更新遮罩的位置和尺寸值

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