H5+CSS3实现官网首页--视频全屏背景
预览效果：
其中，最关键的属性：object-fit: cover;
语法：
object-fit: fill|contain|cover|scale-down|none|initial|inherit;详细语法如下：
| 值 | 描述 |
|---|---|
| fill | 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 |
| contain | 保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放。 |
| cover | 保持原有尺寸比例，高度铺满容器，宽度等比缩放，超出部分被剪切 |
| none | 保留原有元素内容的长度和宽度，超出部分被剪掉，保留下来的内容使图片的正中央 |
| scale-down | 保持原有尺寸比例，当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致 |
完整代码如下：
HTML部分：
<body><div class="video-box"><video class="video-background" preload="auto" loop playsinline autoplay muted src="xd.mp4"tabindex="-1"></video><div class="layer"><img src="https://cs.xidian.edu.cn/images2020/logo02.png" alt="xd_logo" /><div class="slogan"><div class="subtitle">西安电子科技大学2021招生宣传片</div><div class="title">厚德、求真、砺学、笃行</div><div class="try-btn" onclick="postNow()">立即报名</div></div></div></div><div class="content"><div class="avatar-box"><img class="avatar" src="https://profile.csdnimg.cn/F/3/C/1_qq_42691298" alt="不想学习的打工人"><p class="nickname">CSDN-不想学习的打工人~</p></div></div><script>function postNow() {location.href = 'https://www.xidian.edu.cn/'}</script>
</body>注意：在谷歌浏览器中，要想实现视频自动播放，必须要在autoplay基础上加上muted属性
CSS部分：
* {margin: 0;padding: 0;}body {font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;}.video-box {position: relative;height: 100vh;background-color: #C1CFF7;/*进行视频裁剪*/overflow: hidden;}.video-box .video-background {position: absolute;left: 50%;top: 50%;/*保证视频内容始终居中*/transform: translate(-50%, -50%);width: 100%;height: 100%;object-fit: cover;min-height: 800px;}.layer {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(19, 60, 154, .2);}.layer img {margin-top: 15px;margin-left: 100px;}.slogan {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 684px;color: white;text-align: center;}.slogan .subtitle {font-weight: 550;font-size: 20px;letter-spacing: 10px;margin: 0 0 16px;}.slogan .title {font-weight: 550;font-size: 56px;margin: 0 0 16px;}.slogan .try-btn {position: relative;left: 50%;width: 156px;height: 54px;line-height: 54px;margin-top: 40px;margin-left: -78px;color: #3370ff;background: white;text-align: center;border-radius: 100px;font-weight: 600;cursor: pointer;}.content {display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;background-color: black;}.content .avatar-box {display: flex;justify-content: space-between;align-items: center;color: white;}.content .avatar-box .avatar {width: 80px;height: 80px;border-radius: 50%;margin-right: 25px;}.content .avatar-box .nickname {font-size: 35px;font-weight: 550;}H5+CSS3实现官网首页--视频全屏背景相关推荐
- 左右全屏banner焦点图 代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍 源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等 源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
- 移动端页面中阻止视频全屏播放
最近公司的项目中出了需要在局部播放视频的需求,我们都知道HTML5中有一个专门的标签video用来嵌入视频.不过,这个video标签有很多的属性可能很多同学并不是很熟悉,下面我们来认识一下: 在网页里 ...
- 院线售票系统 背景：有一套连锁影院系统，包括官网、视频站、论坛、在线售票等等子系统，现要求你来实现其中的官网首页的电影信息展示和检索功能
设计一(8分):请为该功能设计一张电影信息表,字段大概包括电影名称.内部编号.主演.导演.票价.上映时间.简介.点赞数.众评等字段,除此之外字段可以根据你的设计自由添加(但不能少于以上内容).使用my ...
- html实训QQ音乐官网首页制作
QQ音乐官网首页 html <!DOCTYPE html> <html lang="en"> <head><link rel=" ...
- 【Web开发】纯前端实现科技企业官网首页
前言 本篇博文简单实现一个科技类产品官网的主页,图片素材来自于苹果官网. 相关教程参考自https://www.bilibili.com/video/BV117411n7R1 源代码下载:https: ...
- 网页学习，尝试编写大鹏教育官网首页
最近在学习HTML和CSS,听的是pink老师的课,今天便尝试自己写出大鹏教育官网的首页. 如图是大鹏教育官网首页: 网址:https://www.dapengjiaoyu.cn/ 先说一下写的过程遇 ...
- div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页 ...
- HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业:商城网站设计--小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计 ...
- HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
最新文章
- centos7-yum安装与卸载
- mysql远程服务器返回错误404未找到_远程服务器返回错误: 404错误、远程服务器返回错误:500错误、 HttpWebResponse远程服务器返回错误:(404、500) 错误。...
- 7-1 水文数据校验及处理 (50 分)
- 任意线段集生成多边形_self-attention缺失文本生成||Text Infilling
- 重建程序员能力(2)-如何使asp.net mvc应用增加js和其他功能
- ncurses输入函数：字符+字符串的输入
- jQuery全局Ajax事件处理器
- 手把手让你实现postfix+extmail+mysql虚拟用户邮件体系
- angularjs中的$scope和$rootScope
- 数据挖掘建模过程——思维导图
- python 直方图匹配_直方图匹配原理与python、matlab实现
- Windows 10微软应用商店打不开问题解决方案
- 南北互联网创业者的差异
- mysql三表关联查询
- Linux查看文件内容的方法
- 项目实战——打造一款股票区间交易盯盘系统
- 关于智能共享出行，政界、学界和业界的专家都说了什么？ | SMC 2018
- 两种常见的Vlan间通信的方式
- v93000测试系统软件,V93000自动测试系统
- HDFS--机架感知