zoukankan      html  css  js  c++  java
  • 给网站头部添加视频海报

    给网站头部添加视频海报

     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>

    结果

  • 相关阅读:
    CTK 编译
    MITK 2021.2编译
    执行git add .报错LF will be replaced by CRLF in
    vscode标记“&&”不是此版本中的有效语句分隔符
    vscode prettier插件使用无效
    vscode使用技巧
    kafka及hdfs常用命令
    博客已迁移
    SVM
    逻辑回归
  • 原文地址:https://www.cnblogs.com/tynam/p/9846759.html
Copyright © 2011-2022 走看看