给网站头部添加视频海报
程序员文章站
2022-06-21 22:29:37
给网站头部添加视频海报 结果 ......
给网站头部添加视频海报
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>
结果
上一篇： CSS控制表格tr之间的边距
下一篇： 你的意志一点都不坚定