002-全屏视频背景
002-全屏視頻背景（Fullscreen Video Background）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Fullscreen Video Background</title><link rel="stylesheet" href="style.css"></head><body><div class="banner"><video autoplay muted loop><source src="bg.mp4" type="video/mp4"></video><div class="content"><h1>Fullscreen Video Banner</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div></body> </html> //頭部：字符集、標(biāo)題、css樣式引用（鏈接）；身體：名為banner的類，里面放入視頻（設(shè)置為自動(dòng)靜音循環(huán)播放）來(lái)源為視頻、文字【emmet速寫(xiě)】
——.banner video>source[src=bg.mp4 type=video/mp4]設(shè)置身體和banner的css樣式
@import url('https://fonts.googleapis.com/css?family=Poppins:20'); body {margin: 0;padding:0;font-family:'Poppins',sans-serif;height: 1000px; } .banner {width: 100%;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center; } //身體：設(shè)置內(nèi)外邊距和字體，以及整個(gè)容器的高度； banner：設(shè)置寬高、溢出處理、flex布局及對(duì)齊方式【CSS 溢出（overflow)】
?overflow屬性指定當(dāng)元素的內(nèi)容太大而無(wú)法放入指定區(qū)域時(shí)，是否剪切內(nèi)容或添加滾動(dòng)條。
overflow屬性具有以下值：
?visible- 默認(rèn)。溢出不會(huì)被剪裁。內(nèi)容呈現(xiàn)在元素框外
?hidden - 溢出被剪裁，其余內(nèi)容將不可見(jiàn)
?scroll - 裁剪溢出，并添加滾動(dòng)條以查看其余內(nèi)容
?auto- 與 類似scroll，但僅在必要時(shí)添加滾動(dòng)條
(overflow相當(dāng)于裁剪圖片到頁(yè)面尺寸，否則圖片會(huì)穿幫）
【彈性盒元素(display:flex)】柔性布局
【justify-content:center】設(shè)置flex items沿主軸的對(duì)齊方式。（居中排列？）
【align-items:center】設(shè)置flex items沿交叉軸的對(duì)齊方式。（對(duì)齊各個(gè)物體的中線）
二者區(qū)別見(jiàn)https://juejin.cn/post/6844903911690600456
【object-fit:cover】
設(shè)置元素在框內(nèi)對(duì)齊方式。
cover:被替換的內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框。如果對(duì)象的寬高比與內(nèi)容框不相匹配，該對(duì)象將被剪裁以適應(yīng)內(nèi)容框
【pointer-events: none】
鼠標(biāo)事件拜拜
設(shè)置視頻樣式
.banner video {position: absolute;top: 0;left: 0;object-fit: cover;width: 100%;height: 100;pointer-events: none; } //絕對(duì)定位：左上、（保持寬高比）填充、設(shè)置寬高（全屏）、鼠標(biāo)事件拜拜設(shè)置content樣式，主要設(shè)置層級(jí)關(guān)系、整體寬度、邊距以及居中對(duì)齊
.banner .content//【重要：.banner和.content中間必須加空格，否則無(wú)法成功添加樣式！！】 {position: relative;z-index: 1;max-width: 1080px;margin: 0 auto;text-align: center; } //相對(duì)定位、z-index為1表明顯示層級(jí)，設(shè)置最大寬度，邊距，文本對(duì)齊居中
我們來(lái)繼續(xù)設(shè)置字體樣式，主要設(shè)置字號(hào)和顏色
【text-transform:uppercase】將元素的文本大寫(xiě)。它可以用于使文本顯示為全大寫(xiě)或全小寫(xiě)，也可單獨(dú)對(duì)每一個(gè)單詞進(jìn)行操作
總結(jié)
以上是生活随笔為你收集整理的002-全屏视频背景的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 前端模板——家乡风景的介绍
- 下一篇： css 设置MP4 video视频背景色