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>

相关推荐
程序媛小果1 分钟前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
小屁孩大帅-杨一凡27 分钟前
java后端请求想接收多个对象入参的数据
java·开发语言
从兄32 分钟前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
java1234_小锋34 分钟前
使用 RabbitMQ 有什么好处?
java·开发语言
TangKenny1 小时前
计算网络信号
java·算法·华为
肘击鸣的百k路1 小时前
Java 代理模式详解
java·开发语言·代理模式
城南vision1 小时前
Docker学习—Docker核心概念总结
java·学习·docker
wyh要好好学习1 小时前
SpringMVC快速上手
java·spring
尢词1 小时前
SpringMVC
java·spring·java-ee·tomcat·maven
Mr. zhihao1 小时前
享元模式在 JDK 中的应用解析
java·享元模式