爱程序网

用视频代替背景图片制作酷炫网页

来源: 阅读:

CSS代码(需要css3)

video { 
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  min-height: 100%;
  min-width: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index:-1; }

HTML代码(需要Html5)

 1 <body style="overflow:hidden">
 2   <div>
 3     <video autoplay loop poster="polina.jpg" > 
 4       <source src="video.mp4" type="video/mp4">  
 5       
 6       </video>
 7     </div>
 8   <div style="color: white">Hello  world</div>
 9   <div>Hello  world</div>
10</body>

 

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助