DIV嵌入视频做背景，上面加文字

XUYANBOYA

于 2023-12-27 14:54:32 发布

阅读量1.5k

点赞数 23

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/XUYANBOYA/article/details/135240632

版权

<div class="bad-video">
               <video class="" style="object-fit: fill" width="100%" height="100%" webkit-playsinline style="object-fit:fill;" autoplay loop muted>
               <source src='assets/images/shipin.mp4' type="video/mp4"></source>
               <p>设备不支持</p>
               <video>

               </div>
               <div class="video-font">
                   <h1>开放协作创新</h1>
                   <p>—— 清湛人工智能及工业视觉开放场景实验室 ——</p>
               </div>

<style>

.bad-video {
       position: relative;
       overflow: hidden;
       background-color: #CCCCCC;
                       height: 426px;
                       margin-top: 93px;
       }

       .bad-video .vplay{
       position: absolute;
       width: 15%;
       z-index: 99;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       }
           .video-font{
               z-index: 98;
               position: absolute;
               font-size: 45px;
               margin-top: 93px;
               top: 80px;
               text-align: center;
               width: 100%;
           }
           .video-font h1{
               color: #fff;
               width: 100%;
                   letter-spacing: 3px;
           }
           .video-font p{
               color: rgb(255 255 255 / 60%);
               font-size: 26px;
               letter-spacing: 3px;
               font-weight: 300;
                   padding-top: 15px;
           }