滿版圖片背景、影音背景

/

本篇要解決的問題

最近遇到頁面的第一屏是滿版影片當背景的設計稿,原本以為只是偶爾有的樣式,後來看到朋友做別的案子時也有一樣的設計,才想把這次寫滿版影片的方式給筆記起來。

在找網路範例時,搜尋到 10 個有 9 個是整個頁面只有一個螢幕大小,無法往下滑,因此大部份都把 <video>position 設為 fixed

但記得以前看過幾個頁面,都是後續還有內容的,影片只佔第一屏大小,可繼續再往下滑。本篇筆記的就是這種情形。

而實際做過的案子,更常遇到的是滿版背景圖,而非影片,就一併筆記下來。


滿版背景圖

滿版背景圖會用到的概念是 CSS 的 vh、background。

如果需要在背景圖上壓一層淡黑底讓文字可以看得清楚,就會再用到 position。

範例寫在 CodePen 上,可以直接看原始碼:

See the Pen fullscreen-image-background by sean (@sean-su) on CodePen.

vh(view height) 是單位值,想像把螢幕的可見範圍垂直切成 100 塊,一塊就是 1vh。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

如果是橫的切成 100 塊的話,一塊就是 1vw(view width)。

背景圖的部份,background-size: cover;

cover 會讓圖片等比例縮放並撐滿整個區塊。所以不管是哪種比例大小的圖都可以拉大成滿版。

要注意的是,因為是等比例縮放,所以直立長方形的圖在電腦這種橫的長方形螢幕上,就一定會有部份被裁切掉。反過來說,橫的圖放到直式的手機螢幕上,也一定會部份被裁掉。

解決方式就是桌機、手機寫不同的背景圖。

淡黑底的部份,當外層的 divposition: relative 時,下一層的 div 只要寫以下樣式,就可以將這個 div 拉大到跟外層的 div 同大小:

.child-div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

本篇的範例直接用 ::before 當下一層。


滿版影音背景

這邊說明一下,本篇的滿版影音背景是用 <video> 的,無法用在像 Youtube、Vimeo 那樣的 <iframe> 上。

滿版的影音背景,會用到的概念是 position、vh、object-fit。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Augustus 也在 CodePen 上寫了一個範例:

See the Pen fullscreen-video-background by sean (@sean-su) on CodePen.

vh 的作用跟滿版背景圖一樣,這段不再重寫。

object-fit,這是這次在寫滿版影音背景時才知道的,說明可參考 w3schools

我們直接把它想像成像 background-size,一樣有 containcover,而當設為 cover 時,就跟 background-size 設成 cover 相同,會等比例縮放且填滿空間。

只需要確保 <video> 的長寬跟螢幕的長寬一樣,再設 video 的 object-fitcover,就可以讓影音是滿版的。

Augustus 的實作上,在 IE11、IE10,可以直接吃 object-fit,到了 IE9 就不行了,因此在 CodePen 的範例上有另外寫了遇到 IE 就要給另一個 class,讓 <video> 可以維持置中。

Summary
滿版圖片背景、影音背景
Article Name
滿版圖片背景、影音背景
Description
本篇大綱:本篇要解決的問題、滿版背景圖、滿版影音背景。最近遇到頁面的第一屏是滿版影片當背景的設計稿,原本以為只是偶爾有的樣式,後來看到朋友做別的案子時也有一樣的設計,才想把這次寫滿版影片的方式給筆記起來。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Maps

Google Maps API 學習筆記 – 6:畫新冠肺炎分佈圖

WordPress

WordPress:埋 Google AdSense 廣告

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

Front-End Vue

用 Vue.js 製作圖片版 EDM 生成器

Front-End

Word、Excel 合併列印功能使用筆記

Analytics Google

GA 報表:電子商務 內部宣傳 報表

API

Instagram 基本顯示 API :抓取公開 IG 資料、相片、影片

Google Sheets

Google Sheets 略過空白格重整資料

Vue

用 VuePress 製作說明文件頁面 – 6:部署

PWA

PWA 學習筆記-1:Cache、Workbox 基本使用

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言