如何在 non-black/white 背景上制作带有视频的文本剪贴蒙版

Question

我希望将文本用作背景视频的剪贴蒙版，如下所示：https://codepen.io/corvus-007/pen/vYEXLmg，它使用 mix-blend-mode: darken 滤镜来创建效果。

我的问题是这个方法似乎只在背景为黑色或白色时才有效。我的页面背景的十六进制值为#161616，当我尝试使用上述方法时，我仍然可以在文本之外看到过滤后的视频。

有谁知道解决这个问题的最佳方法吗？

Answer 1

您可以使用另一个 h2 元素来代替 color:#fff 和 mix-blend-mode:multiply:

.banner {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h2 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-weight: 900;
  font-size: 28vw;
  text-align: center;
  animation: anim-text-color 16s infinite linear;
  text-transform: uppercase;
  background-color: #ffffff;
  mix-blend-mode: screen;
}

#h2 {
  color: #fff;
  animation: none;
  background-color: #161616;
  mix-blend-mode: multiply;
}

@keyframes anim-text-color {
  0%,
  100% {
    color: #36b5b0;
  }
  20% {
    color: #380e7f;
  }
  40% {
    color: #6915cf;
  }
  60% {
    color: #d62196;
  }
  80% {
    color: #6807f9;
  }
}

<div class="banner">
  <video autoplay muted loop>
    <source src="https://storage.googleapis.com/coverr-main/mp4%2FOne-Swan.mp4" type="video/mp4">
  </video>
  <h2>video</h2>
  <h2 id="h2">video</h2>
</div>

如何在 non-black/white 背景上制作带有视频的文本剪贴蒙版

How do I make a text clipping mask with video on non-black/white background

css

html5-video