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

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>

 

posted @ 2015-07-09 15:17  Ones(小万)  阅读(598)  评论(0)  编辑  收藏  举报