web前端：视频背景（铺满整个网页）
生活随笔
收集整理的這篇文章主要介紹了
web前端：视频背景（铺满整个网页）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1：效果圖：
其中每行相片都是來回滾動，背景為視頻?
2：代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>帶背景音樂的電子相冊</title><style type="text/css">body{width:100%;height:100%;}video{ <!--設置vedio屬性-->height: 100%;width: 100%;position: absolute; <!--重要-->z-index:-1; <!--重要-->object-fit:fill <!--重要-->} .hhh{text-align:center;width:100%;height:30px;background-color:black;}ul{list-style-type: none;font-size:20px;line-height: 1;}li{float:left;text-align:center;}img{border:10px #cc0066 ridge;width:140px;height:140px;margin-right: 30px}.li1{float:center;text-align:center;}</style> </head> <body ><embed src="nb.mp3" autoplay loop width="0" height="0"><video src="jyt.mp4" autoplay loop muted></video><div class="hhh"><p><font size="5" face="黑體" color="red">音樂電子相冊</font></p><hr width="100%" color="yellow"><marquee behavior="alternate" direction="right" width="100%"><ul> <li><a href="t1.jpg" ><img src="t1.jpg"></a><br><a href="t1.jpg">t1</a></li><li><a href="t2.jpg" ><img src="t2.jpg" ></a><br><a href="t2.jpg">t2</a></li><li><a href="t3.jpg" ><img src="t3.jpg" ></a><br><a href="t3.jpg">t3</a></li><li><a href="t4.jpg" ><img src="t4.jpg" ></a><br><a href="t4.jpg">t4</a></li><li><a href="t5.jpg" ><img src="t5.jpg"></a><br><a href="t5.jpg">t5</a></li><li><a href="t6.jpg" ><img src="t6.jpg"></a><br><a href="t6.jpg">t6</a></li></ul></marquee><marquee behavior="alternate" direction="left" width="100%"><ul> <li class="li1"><a href="t7.jpg" ><img src="t7.jpg" ></a><br><a href="t7.jpg">t7</a></li><li class="li1"><a href="t8.jpg" ><img src="t8.jpg" ></a><br><a href="t8.jpg">t8</a></li><li class="li1"><a href="t9.jpg" ><img src="t9.jpg" ></a><br><a href="t9.jpg">t9</a></li><li class="li1"><a href="t10.jpg" ><img src="t10.jpg" ></a><br><a href="t10.jpg">t10</a></li><li class="li1"><a href="t11.jpg" ><img src="t11.jpg"></a><br><a href="t11.jpg">t11</a></li><li class="li1"><a href="t12.jpg" ><img src="t12.jpg"></a><br><a href="t12.jpg">t12</a></li></ul></marquee> <marquee behavior="alternate" direction="right" width="100%"> <ul> <li><a href="t13.jpg" ><img src="t13.jpg" ></a><br><a href="t13.jpg">t13</a></li><li><a href="t14.jpg" ><img src="t14.jpg" ></a><br><a href="t14.jpg">t14</a></li><li><a href="t15.jpg" ><img src="t15.jpg" ></a><br><a href="t15.jpg">t15</a></li><li><a href="t16.jpg" ><img src="t16.jpg" ></a><br><a href="t16.jpg">t16</a></li><li><a href="t17.jpg" ><img src="t17.jpg" ></a><br><a href="t17.jpg">t17</a></li><li><a href="t18.jpg" ><img src="t18.jpg" ></a><br><a href="t18.jpg">t18</a></li></ul></marquee><marquee behavior="alternate" direction="left" width="100%"> <ul> <li class="li1"><a href="t19.jpg" ><img src="t19.jpg" ></a><br><a href="t19.jpg">t19</a></li><li class="li1"><a href="t20.jpg" ><img src="t20.jpg" ></a><br><a href="t20.jpg">t20</a></li><li class="li1"><a href="t21.jpg" ><img src="t21.jpg" ></a><br><a href="t21.jpg">t21</a></li><li class="li1"><a href="t22.jpg" ><img src="t22.jpg" ></a><br><a href="t22.jpg">t22</a></li><li class="li1"><a href="t23.jpg" ><img src="t23.jpg" ></a><br><a href="t23.jpg">t23</a></li><li class="li1"><a href="t24.jpg" ><img src="t24.jpg" ></a><br><a href="t24.jpg">t24</a></li></ul></marquee> <hr width="100%" color="yellow"> </div> </body> </html>3：簡要介紹視頻部分（其他部分不了解可以去看我之前的博文或者去w3school網站學習）?
初次制作的小白會卡在視頻背景不會鋪滿整個頁面這個地方，解決方法很簡單，直接在樣式的屬性設置里加一行：object-fit:fill ，關于vedio樣式的屬性設置時關鍵，關鍵步在代碼中已經標明。
總結
以上是生活随笔為你收集整理的web前端：视频背景（铺满整个网页）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 统计学小抄：常用术语和基本概念小结
- 下一篇： HTML5不支持createtouch,