返回

用视频和混合模式文本打造视听盛宴

前端

让我们回顾一下网页的全屏背景视频和mix-blend-mode属性。之前我探讨过这两个方面的实现，但从未结合过它们。Everlane 最近的网站设计激发了我的灵感，让我意识到将它们结合起来会产生多么有趣的效果。

Everlane 的网页使用了一个全屏的背景视频，并用 mix-blend-mode 属性创建了一个混合模式的文本，该文本与视频完美融合，产生了非常吸引人的效果。与我之前介绍的全屏视频相比，这种代码明显简单得多，而且我们可以假定它在移动设备上的显示效果也同样出色。

视频容器

<div class="video-container">
  <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

混合模式文本

<div class="text-container">
  <h1>欢迎来到 Everlane</h1>
  <p>可持续时尚的领导者</p>
</div>

.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.5rem;
}

.video-container video {
  mix-blend-mode: screen;
}

视频容器包含了一个视频元素，该元素设置为自动播放、循环播放和静音。文本容器包含了一个标题和一个段落元素，它们绝对定位在视频容器的中心。标题和段落元素都使用白色文本，并居中对齐。

为了创建混合模式文本，我们使用 mix-blend-mode 属性将视频容器的视频元素设置为“screen”混合模式。这导致文本与视频混合，产生了一种非常有趣的效果。

浏览器支持

mix-blend-mode 属性在所有现代浏览器中都得到很好的支持，包括 Chrome、Firefox、Safari 和 Edge。然而，在 Internet Explorer 中并不支持该属性。

实际应用

全屏背景视频和混合模式文本可以用于创建各种各样的网站设计。例如，它们可以用于创建引人入胜的登陆页面、产品页面或关于我们页面。它们也可以用于创建视频博客、在线课程或其他多媒体内容。

结束语

全屏背景视频和混合模式文本是一种非常有效的方法，可以为您的网站增添趣味性和吸引力。它们易于实现，并且可以在所有现代浏览器中很好地工作。如果你正在寻找一种方法来让你的网站脱颖而出，那么我强烈建议你尝试一下这种组合。