CSS中mix-blend-mode应用于文本时失效的问题

核心原因是文本默认的黑色在mix-blend-mode: screen模式下，和下方元素混合后不会产生"裁剪"视觉效果——黑色与任何颜色做screen运算，结果都是下方元素的原色，相当于文本完全"透"过去了，看不到文本形状的裁剪。而图片能生效是因为自身带有透明区域或非黑色像素，混合后能形成视觉对比。

可行解决方案 #

给文本元素设置黑色背景+白色文字，再配合mix-blend-mode: screen，就能实现类似图片的裁剪效果：

修改后的CSS代码 #

body {
  margin: 0;
}

div {
  height: 100vh;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
}

span {
  position: absolute;
  font-size: 200px;
  font-weight: bold; /* 可选，增强文本清晰度 */
  color: #fff; /* 白色文字 */
  background-color: #000; /* 黑色背景 */
}

.clip {
  mix-blend-mode: screen;
}

修改后的HTML代码 #

<div>
  <img src="https://images.unsplash.com/photo-1625252568254-256958377c1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80">
  <span class='clip'>Text</span>
</div>

原理说明 #

screen混合模式的运算逻辑是：1 - (1 - 上层像素值) * (1 - 下层像素值)

• 文本的黑色背景区域：与下方图片混合后，结果等于图片本身的颜色，视觉上等同于透明
• 文本的白色文字区域：与下方图片混合后，会保留图片对应位置的颜色，从而形成"文本裁剪背景"的视觉效果

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