首页 > 前端技术 > 正文

使用视频作为网页背景的代码写法
2015-07-13 15:15:08    网络资源
0   

使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现

使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面,而且要响应浏览器窗口大小的变化。

Github下载:

「covervid.min.js」引用:

Java File
1
2
<script src="covervid.min.js">script>

HTML和CSS写法:

html
1
2
3
4
5
6
<div class="covervid-wrapper">
    <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
        <source src="videos/video.webm" type="video/webm">
        <source src="videos/video.mp4" type="video/mp4">
    video>
div>
css
1
2
3
4
5
6
7
.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

相关热词搜索: 视频  背景  代码  网页

上一篇:纯CSS设置Checkbox复选框控件的样式 下一篇:最后一页