如何用mix-blend-mode:multiply实现黄色背景的镂空文字效果

方法一：调整混合模式与文字颜色 #

原方案依赖mix-blend-mode: multiply+黑色背景+白色文字实现镂空，换成黄色背景时，只需切换混合模式并反转文字颜色：

修改.text和.title的CSS属性：

.text {
  background-color: yellow; /* 替换黑色为黄色背景 */
  /* 保留其他原有属性 */
  mix-blend-mode: screen; /* 将multiply替换为screen */
}

.title {
  color: black; /* 白色文字改为黑色 */
  /* 保留其他原有属性 */
}

原理：screen混合模式下，黑色文字会"挖空"黄色背景层，让下层视频透过文字区域显示，完美复刻镂空效果。

方法二：使用background-clip: text（更直观的镂空实现） #

如果不想依赖混合模式，可直接用background-clip: text实现文字镂空，将视频作为文字的背景源：

调整后的CSS代码：

.text {
  /* 移除background-color和mix-blend-mode属性 */
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; 
  overflow: hidden;
}

.title {
  /* 移除color: white */
  font-size: 1000px;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  position: relative;
  backface-visibility: hidden;
  /* 添加镂空核心属性 */
  background: url(https://www.w3schools.com/howto/rain.mp4);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 文字透明，显示背景视频 */
}

优势：无需依赖上层背景色与混合模式的配合，逻辑更直观，现代浏览器兼容性良好。

完整可运行代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<div>
  <video autoplay muted loop id="myVideo">
    <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
  <div class="parent">
    <div class="text">
      <h1 class="title">CCCCCC</h1>
    </div>
  </div>
</div>

CSS（采用方法一的修改版） #

* {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  height: 100%
}

.text {
  background-color: yellow;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; 
  mix-blend-mode: screen;
  overflow: hidden;
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.title {
  color: black;
  font-size: 1000px;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  position: relative;
  backface-visibility: hidden;
}

JS（保持原有逻辑不变） #

var scale = (window.innerWidth / 175) + 2.5; // window / character width + scale padding
console.log(scale);

var distanceFromViewportCenterToCharCenter = 350;
var offsetAfterScaling = distanceFromViewportCenterToCharCenter * scale;
var endScale = 0.2;

gsap.fromTo(
  ".title", 
   {
     opacity: 0, transform: `translate(${offsetAfterScaling}px, 0) scale(${scale})`,
   },
   {
     opacity: 1, transform: `translate(0, 0) scale(${endScale})` , duration: 5
   }
 );

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