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>

相关推荐
Penge66643 分钟前
《Go 后端开发者学 TypeScript:数组和元组》
javascript
Penge6661 小时前
《Go 后端开发者学 TypeScript:export关键字大全》
javascript
Penge6661 小时前
《Go 后端开发者学 TypeScript:从零理解 async、await 与 Promise》
javascript
独泪了无痕2 小时前
探索Pinyin4j-Java中的拼音转换利器
java·后端
Penge6662 小时前
typescript 中const用法
javascript
Csvn2 小时前
Monorepo
前端
Csvn2 小时前
流水线
前端
Csvn2 小时前
微前端架构
前端
道尔柯南3 小时前
C++ string 类详解:从常用接口到深拷贝,彻底掌握字符串处理
android·java·c++
kingx34 小时前
Bugku 3122 谷歌小恐龙题解:纯离线逆向 Vault 的 AES-GCM 加密资源(附 Python 解密器)
java·逆向·ctf·bugku·aes-gcm