这篇文章给大家分享的是有关html5在网站头部添加视频海报的方法是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
给网站头部添加视频海报的代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视频海报</title> <style> *{ margin: 0; padding: 0; } #banner{ width: 100%; height: 500px; background: purple; overflow: hidden; position: relative; } #banner video{ width: 100%; position: relative; opacity: 0.6; /* 设置透明度 */ } #banner h3,h5{ position: absolute; top: 120px; left: 150px; width: 100%; text-align: left; color: #fff; line-height: 30px; } #banner h3{ top: 80px; font-size: 40px; text-decoration: underline; } </style> </head> <body> <div id="banner"> <video loop autoplay> <!-- loop循环播放,autoplay自动播放 --> <source src="video/banner.mp4"> </video> <h3>SLOW DOWN</h3> <h5>静下来<br> 携一缕清风,续一杯清茶 <br> 且听风轻云淡</h5> </div> </body> </html>
结果
感谢各位的阅读!关于html5在网站头部添加视频海报的方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。