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

<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>

相关推荐
空の鱼10 分钟前
java开发,IDEA转战VSCODE配置(mac)
java·vscode
桂月二二42 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
P7进阶路1 小时前
Tomcat异常日志中文乱码怎么解决
java·tomcat·firefox
小丁爱养花2 小时前
Spring MVC:HTTP 请求的参数传递2.0
java·后端·spring
CodeClimb2 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
等一场春雨2 小时前
Java设计模式 九 桥接模式 (Bridge Pattern)
java·设计模式·桥接模式
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
带刺的坐椅2 小时前
[Java] Solon 框架的三大核心组件之一插件扩展体系
java·ioc·solon·plugin·aop·handler
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css