如何用视频做网页的背景
的有关信息介绍如下:偶然看到一国外网站,发觉背景竟然是视频。只能感觉惊异。搜集好多资料,终于也弄好了,下面把经验介绍给大家。
使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面,而且要响应浏览器窗口大小的变化。
如图:
下面,打开网页编辑工具。
添加css代码:
这里摆放视频格式的顺序很重要,因为有些版本的谷歌浏览器里,如果.webm格式的视频放在了其他视频后面,视频将无法播放。
我们使用视频的第一帧图像作为视频的封面图片,这样,当背景视频一旦加载完成,我们可以看到很流畅的从图片过度到背景视频播放。
让视频扩展到全屏的方法:
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover; }
一些老式的浏览器无法播放这种格式的视频,但它们仍然识别