开发者社区> Ethan.wys> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

『html5、css3』将视频做为网页背景 超炫!

简介: 效果图展示 仿墨迹天气首页 github项目地址:https://github.com/Ethan997/Video-background-page PC端网页效果预览:http://www.
+关注继续查看
img_7de76e20f96ba364cf5b1385bbec91c3.gif
效果图展示

仿墨迹天气首页

github项目地址:https://github.com/Ethan997/Video-background-page

PC端网页效果预览:http://www.ethan997.com:8080/holiday_project/intro/intro.html

想要实现这种效果很容易,只需要懂得H5的video, 按照我的步骤一步一步来就可以了~

首先要制作我们的页面,用到的是html5的新标签video

html :

<video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid">

<source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4">

</video>


css样式也没有什么好说的,只是要让视频充满屏幕、循环、无声、直接播放、隐藏按钮和不重复就可以了。

css:

body{

background-color:gray;

background:url("http://cdn.moji.com/websrc/video/video621.mp4") no-repeat center0px;

}

video#bgvid  {

position: fixed; right:0; bottom:0;

min-width:100%; min-height:100%; width: auto;height:

auto;z-index:-100; background-size: cover;

}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 20.3.3 指定编号的样式
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第20章 ,第20.3节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1072 0
《HTML 5与CSS 3权威指南(第3版·下册)》——19.2 属性选择器
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第19章 ,第19.2节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1228 0
+关注
Ethan.wys
菜鸟网络前端萌新
5
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载