全屏背景視頻和混合模式文本的實現

---

全屏背景視頻和混合模式文本的實現

本文轉載自：衆成翻譯
譯者：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。

---