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>
//头部：字符集、标题、css样式引用（链接）；身体：名为banner的类，里面放入视频（设置为自动静音循环播放）来源为视频、文字

【emmet速写】

——.banner video>source[src=bg.mp4 type=video/mp4]

设置身体和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;
}
//身体：设置内外边距和字体，以及整个容器的高度；
banner：设置宽高、溢出处理、flex布局及对齐方式

【CSS 溢出（overflow)】
overflow属性指定当元素的内容太大而无法放入指定区域时，是否剪切内容或添加滚动条。
overflow属性具有以下值：
visible- 默认。溢出不会被剪裁。内容呈现在元素框外
hidden - 溢出被剪裁，其余内容将不可见
scroll - 裁剪溢出，并添加滚动条以查看其余内容
auto- 与类似scroll，但仅在必要时添加滚动条
(overflow相当于裁剪图片到页面尺寸，否则图片会穿帮）

【弹性盒元素(display:flex)】柔性布局

【justify-content:center】设置flex items沿主轴的对齐方式。（居中排列？）

【align-items:center】设置flex items沿交叉轴的对齐方式。（对齐各个物体的中线）
二者区别见https://juejin.cn/post/6844903911690600456

【object-fit:cover】
设置元素在框内对齐方式。
cover:被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框

【pointer-events: none】
鼠标事件拜拜

设置视频样式

.banner video
{position: absolute;top: 0;left: 0;object-fit: cover;width: 100%;height: 100;pointer-events: none;
}
//绝对定位：左上、（保持宽高比）填充、设置宽高（全屏）、鼠标事件拜拜

设置content样式，主要设置层级关系、整体宽度、边距以及居中对齐

.banner .content//【重要：.banner和.content中间必须加空格，否则无法成功添加样式！！】
{position: relative;z-index: 1;max-width: 1080px;margin: 0 auto;text-align: center;
}
//相对定位、z-index为1表明显示层级，设置最大宽度，边距，文本对齐居中

我们来继续设置字体样式，主要设置字号和颜色

.banner .content h1
{margin: 0;padding: 0;font-size: 4.5em;text-transform: uppercase;color:aliceblue;
}
.banner .content p
{font-size: 1.5em;color: aliceblue;
}
//对于第一级标题，设置内外边距、字号、全大写、颜色；对于段落文本，设置字号和颜色

【text-transform:uppercase】将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作

002-全屏视频背景相关推荐

HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
htmlcss全屏视频背景
在来练习一个全屏视频背景的项目: 代码如下: <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
原生JS实现全屏视频背景滚动淡出
给大家分享一个用原生JS实现全屏视频背景滚动淡出,效果如下 : 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
css+全屏视频背景+响应式布局
记录自己做网页的过程,便于以后忘记回来学习. 视频背景用一个视频作为网页的背景,视频大小会随窗口大小变化(响应式布局) html代码: <div class="bg-video&qu ...
Html手机web背景全屏,使用全屏背景的网页设计欣赏全屏网页背景教程
使用全屏背景的网页设计欣赏 & 全屏网页背景教程 Sponsor 全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类.建筑类.餐厅美 ...
Android的WebView如何播放视频和全屏视频（腾讯X5内核）
WebView如何播放视频和全屏视频前言 1. 接入SDK 2. 具体场景和代码实现 3. 踩坑 3.1 android.system.ErrnoException: chmod failed: E ...
解决uniapp退出全屏视频字体变大的bug
1.退出全屏视频时跳转到一个空页面 2.在空页面onshow上立即跳转回原来的页面就可以爱你哟 onshow:function(){ uni.navigateTo{ url:'' } }
阿里外贸国际站全屏视频代码视频怎么装修教程
阿里外贸国际站全屏视频代码视频怎么装修教程阿里国际站英文站平台阿里巴巴国际站外贸装修店铺视频模块代码怎么做代码视频代码工具装修拼接方法装修工具:一秒美工助手工具
屏幕测试图片全屏_全屏视频测试
屏幕测试图片全屏只需记录一些全屏视频技术以及jQuery UI对话框窗口即可 . 我已经在演示中嵌入了YouTube视频,但是您可以嵌入任何视频. 在GitHub上查看演示查看项目正在检查浏览 ...

002-全屏视频背景

002-全屏视频背景（Fullscreen Video Background）

002-全屏视频背景相关推荐

最新文章

热门文章