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

发布时间:2023年12月28日

<embed src="assets/images/shipin.mp4" width="100%" height="400px"></embed>

<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;
?? ??? ??? ?}

</style>

文章来源:https://blog.csdn.net/XUYANBOYA/article/details/135240632
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。