{ 鼠年全馬鐵人挑戰 ;} Week 02 - 做一個影片背景的網頁吧


今天會走ㄉ步驟有:

  • Coverr 下載自己喜歡的短片 / 或自己的影片等
  • Google font 選自己喜歡的字體
  • 打開 VSCode 然後 複製貼上 (欸不是

Html 架構:

<div class="wrap">
  <div class="banner">
    <video autoplay muted loop>
      <source src="https://storage.coverr.co/videos/coverr-italian-old-city-1570370740593?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTg1NjM4MTMxfQ.O0oXifvIX_nFLO3JzgH2GTW3JNCokuMvCzdcsesGj4g" type="video/mp4">
    </video>
    <h2>Hello</h2>
  </div>
</div>

video 有一些屬性。
像這次用到 autoplay muted loop

autoplay 係指影片就緒後,會自動播放。
muted 係指載入的影片靜音
loop 係指重複播放音訊或影片

這裡要注意一點,如果只設定 autoplay 的話,當網頁載入時並不會自動播放!
一定要加上 muted 才會自動播放。

也就是說影片在 靜音 的情況下才會自動播放。


Css 部分:

/* Reset CSS */
*{
  margin:0;
  padding:0;
  /* Google font 字體 */
  font-family: 'Poppins', sans-serif;
}
.banner{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:center;
}
.banner video{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  object-fit: cover;
}
.banner h2{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  font-size: 30vw;
  text-align: center;
  line-height:100vh;
   /* 字全大寫 */
  text-transform:uppercase;
  background-color: #fff;
  mix-blend-mode: screen;
}

object-fit: cover; 就像 background-size: cover 一樣,兩者差異在前者可以用在 img 上而 img 有可以設定 alt="" 可提高 SEO 搜尋引擎;但 background-size 就沒有辦法惹 ><

這裡要特別提 mix-blend-mode: screen; 根本就是本次的精華 R。
他有著設計軟體 (PS) 才能做到的圖層混合效果。
像這次就是在影片上壓上 h2 標籤,讓他蓋過 video ,再使用 mix-blend-mode: screen; 語法讓他濾色

線上:https://codepen.io/yuicheng1006/pen/RwPvzrW?editors=1100

參考:
https://www.youtube.com/watch?v=S1LyYnyqRRs
https://dometi.com.tw/blog/html5-video-autoplay/
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

https://button.like.co/yuice18

#css #鼠年全馬鐵人挑戰 #w3HexSchool
I really love CSS
紀錄 CSS 學習之筆記






Related Posts

JavaScript 中的同步與非同步(上):先成為 callback 大師吧!

JavaScript 中的同步與非同步(上):先成為 callback 大師吧!

《鳥哥 Linux 私房菜:基礎篇》Chapter 06 - Linux 的檔案與目錄管

《鳥哥 Linux 私房菜:基礎篇》Chapter 06 - Linux 的檔案與目錄管

Firebase Storage 入門

Firebase Storage 入門



Comments











Sponsored