全屏背景视频和混合模式文本的实现

---

全屏背景视频和混合模式文本的实现

本文转载自：众成翻译
译者：chajn
链接：http://www.zcfy.cc/article/1275
原文：http://thenewcode.com/1136/Fullscreen-Background-Video-with-mix-blend-mode-Overlay-Text?utm_source=CSS-Weekly&utm_campaign=Issue-230&utm_medium=email

我之前谈过网页的全屏背景视频的案例，我还说过如何使用mix-blend-mode属性来创建混合模式的文本，但我从没把两者结合起来，本文由此诞生。

最近时尚网站Everlane展示了这种结合，它触发了我写这篇文章的灵感。首先这里面的代码比起之前的全屏视频要明显简单的多，其次我们假定浏览者使用的也是更新的浏览器（MS Edge还不支持mix-blend-mode），所以视频背景只能在IE10以上版本中可运行。

HTML代码

我们从 video 开始，加上playsinline属性，来按序播放（在iOS10系统中允许页内重放），再加上mute属性 ，以让视频静音。

全屏视频 -> 自动播放的循环视频 -> 不出声。

<video poster="fashion.jpg" playsinline autoplay muted loop>
    <source src="fashion.webm" type="video/webm">
    <source src="fashion.mp4" type="video/mp4">
</video> 

在关联的Codepen中，我加了一个header节点并fixed定位到页面顶端：

<header>
    <h1>ZIGGY</h1>
      <nav>
        <a href="#">Men</a>
        <a href="#">Women</a>
        <a href="#">Stores</a>
        <a href="#">Contact</a>
      </nav>
</header> 

我在导航项下加入了一些内容，这个文本需要短一些（最好只包含几个词），因为事实证明较长的文本进行混合模式的时候体验很不好：

<div id="fashion">
  <h2>There’s a brand new dance but I don’t know its name…</h2>
</div> 

CSS代码

video节点要设置绝对定位，根据 object-fit 所述，以设置宽度和高度百分百来覆盖全屏：

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

注意：视频本身并没有用fixed进行定位，以上代码完美适用于内容集中的情况，你怎么移动它都不会超过浏览器窗口的范围。

将body的 margin 为 0：

body {
  margin: 0;
  background: #000;
}

hover时切换标题元素的颜色和背景：

header {
  position: fixed;
  width: 100%;
  text-align: center;
  color: white;
  transition: .4s;
}
header:hover {
  background: rgba(255,255,255,0.8);
  color: #000;
}

用flexbox可以将div里的文本始终保持居中，并且会根据窗口大小缩放：

div#fashion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

中间的文本使用mix-blend-mode: overlay，用difference也可以。

h2 { 
  font-family: Century Schoolbook, Georgia, serif;
  margin: 2rem 3rem 0;
  mix-blend-mode: overlay;
  color: #fff;
 }

在关联的CodePen实例中我设定font-size为vmin，因为它能和对应的设计完美匹配；我会在下一篇文章中详细探讨vmin和vmax。

---