html - 如何在CSS中使用视频作为文本背景

Question

有没有办法在 css 中使用视频作为文本背景？我知道您可以使用

来使用图像和 gif

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

但是 gif 的质量太低了。

edit:我想要的是视频，如果表达错误请见谅。

Answer 1

您可以使用 mix-blend-mode 来完成此操作。它在 IE 中不起作用，但它与所有其他现代浏览器兼容。

我在这里使用的是嵌入式 vimeo 剪辑，但您可以只放置视频并相应地替换 css 标签(从 iframe 更改为视频)。

* {
  margin: 0;
  padding: 0;
}

.text-video {
  position: relative;
}

iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  overflow: hidden;
}

.text-video .text {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  overflow: hidden;
  background: #fff;
  mix-blend-mode: screen;
  overflow: hidden;
}

.text-video .text p {
  font-size: 12vw;
  line-height: 1;
  font-weight: 900;
  font-family: sans-serif;
}

<div class="text-video">
  <iframe src="https://player.vimeo.com/video/134967947?autoplay=1&loop=1&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen;"></iframe>
  <div class="text">
    <p>VIDEO TEXT</p>
  </div>
</div>