使用 CSS 将视频作为文本背景

在本文中，我们将使用任意视频作为文本背景。您可能已经知道，不能直接使用视频作为文本背景，因此我们借助 CSS 来实现。首先，让我们看看我们正在构建什么——

现在你已经了解了我们在做什么，所以让我们开始编写代码吧 -

HTML



<div class="container">
  <video class="bg-video" autoplay loop>
    <source src="https://imgur.com/2cSaKIt.mp4" type="video/mp4" />
  </video>
  <p class="text">AWESOME TEXT</p>
</div>

在 HTML 代码中，该类container是保存视频和文本的主要容器。它有两个子类，一个是视频，另一个是文本。

现在让我们用 CSS 来设计它 -

CSS



* {

  margin: 0;

  padding: 0;

}


/* Container should be full height and full width */

.container {

  position: relative;

  width: 100vw;

  height: 100vh;

}


.container > .bg-video {

  width: 100%;

  height: 100%;

}


/* background-color and color should be the same as the below otherwise it won't work /

.container > .text {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  background-color: #000;

  color: #fff;

  font-weight: 900;

  font-size: 100px;

  font-family: sans-serif;

  / Mix Blend Mode does the all magic */

  mix-blend-mode: multiply;

  user-select: none;

}

Codepen 就在这里

在CodePen上查看Jatin @j471n编写的Pen video-as-text-background。

现在您可以通过给我买一杯咖啡来表示您的支持。😊👇

鏂囩珷鏉ユ簮锛�https://dev.to/j471n/video-as-text-background-using-css-58im