网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
R语言
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
网页特效
>> 正文
纯css中video做背景的网站
阅读：4754 输入：2020-06-12 16:08:55
<style> body,h1{margin:0;padding: 0;} li{list-style: none;} video{ width:100%; height:100vh;/*参考其上一级，即body的，页面高度>body的高度，应该修改成浏览器高度，故要设置body高度，body的上一级是html， 即html{height:100%;}，实现html=body=video宽度，太麻烦。应用vh单位。 超了一点，要删除滚动条占位宽度*/ vertical-align: bottom;/*左右内容垂直对齐，基线对齐*/ object-fit: cover;/*可替换元素在正中*/ } .heart{ position: relative; margin:50px; width:200px; height:200px; background-color:#096; } div{ position: fixed; left: 0; top: 0; } h1,.logo{ margin-top:10px; margin-left: 50px; } h1{ font-size: 0; } .header{ } .footer{ margin:0 auto; top:80%; left: 50%; width:70%; transform: translateX(-50%); text-align: center; color:blue; font-size:15pt; } </style> </head> <body> <video src="1.mp4" autoplay loop muted></video> <div> <h1>标题</h1> <div class="logo"><img src="logo.png" /></div> <div class="footer"><p>ssssss<p></p>Tel:sss</p></div> </div> </body> <!-- 加标题，要脱离文档流让h1重新定位 -->
上一篇：
css3实现心型特效
下一篇：
纯js+css3实现商品类目功能
相关阅读
css中鼠标显示手形状
CSS3实现太极图
[精]css3弹性盒模型实现轮播幻灯
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens