給網站頭部添加視頻海報
阿新 • • 發佈：2018-10-25
tle 循環 -h align char oct cor doctype pre
給網站頭部添加視頻海報
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>視頻海報</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #banner{ 12 width: 100%; 13 height: 500px; 14 background: purple; 15 overflow: hidden; 16 position: relative; 17 } 18 #banner video{ 19 width: 100%; 20 position: relative; 21 opacity: 0.6; /* 設置透明度 */ 22 } 23 24 #banner h2,h4{ 25 position: absolute; 26 top: 120px; 27 left: 150px; 28 width: 100%; 29 text-align: left; 30 color: #fff; 31 line-height: 30px; 32 33 } 34 #banner h2{ 35 top: 80px; 36 font-size: 40px; 37 text-decoration: underline; 38} 39 </style> 40 </head> 41 <body> 42 <div id="banner"> 43 <video loop autoplay> <!-- loop循環播放，autoplay自動播放 --> 44 <source src="video/banner.mp4"> 45 </video> 46 <h2>SLOW DOWN</h2> 47 <h4>靜下來<br> 攜一縷清風，續一杯清茶 <br> 且聽風輕雲淡</h4> 48 </div> 49 </body> 50 </html>
結果
給網站頭部添加視頻海報