给网站头部添加视频海报
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> 结果
转载于:.html
本文发布于:2024-02-04 23:39:59，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170719015260812.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
