给网站头部添加视频海报
Posted tynam
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了给网站头部添加视频海报相关的知识，希望对你有一定的参考价值。
给网站头部添加视频海报
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>
结果
以上是关于给网站头部添加视频海报的主要内容，如果未能解决你的问题，请参考以下文章