<!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 h2,h4{ position: absolute; top: 120px; left: 150px; width: 100%; text-align: left; color: #fff; line-height: 30px; } #banner h2{ 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> <h2>SLOW DOWN</h2> <h4>静下来<br> 携一缕清风,续一杯清茶 <br> 且听风轻云淡</h4> </div> </body> </html>
结果
原文地址:https://www.jb51.cc/html5/1199903.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。