如何用视频做网页的背景

 时间:2026-02-12 18:26:26

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

如图:

如何用视频做网页的背景

2、下面,打开网页编辑工具。

添加css代码:

<video autoplay loop poster="polina.jpg" id="bgvid"> 

 <source src="polina.webm" type="video/webm">  

<source src="polina.mp4" type="video/mp4"></video>

这里摆放视频格式的顺序很重要,因为有些版本的谷歌浏览器里,如果.webm格式的视频放在了其他视频后面,视频将无法播放。

我们使用视频的第一帧图像作为视频的封面图片,岔撤这样,当背景视频一旦加载完成,我们可以看到很流畅的从图片过度到背景视频播放。

如何用视频做网页的背景

3、让视频扩展到全屏的方法:

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; }

一些老式的浏览痕择歌器无法播放这种格式的视频,但它们仍然识别<video>标记(除了IE8/6)。对于这些浏览器,我们使用了background-image来弥补它们的不支持,使用的图片就是视频的封面图片。

如何用视频做网页的背景

  • dreamweaver cs5如何设置图文并排
  • Dreamweaver怎么把图片放在页面的中间位置
  • Dreamweaver如何插入普通视频
  • Dw怎样新建一个站点
  • 用DW做好网页后如何上传到网上
  • 热门搜索
    读后感开头怎么写 酱鸭腿的做法 为什么读书 为什么不能克隆人 结膜炎怎么治疗 怎么系鞋带 蛋挞皮的做法视频 结婚请柬怎么写 盆腔积液怎么治疗 元宵节为什么吃汤圆