<template>
<video >
<source src='..\public\
img\bg.mp4' type="video/mp4"></source>
</video>
<h1>小组成员展示</h1>
<div class="one">
<div class="gao"></div>
<h3>高豪东</h3>
<p><b>111</b></p>
</div>
<div class="two">
<
img class="b" src='..\public\
img\b.jpg'>
<div class="su"></div>
<h3>苏恒一</h3>
<p><b>宇宙超级无敌大帅哥</b></p>
</div>
<div class="three">
<div class="wen"></div>
<h3>文建峰</h3>
<p><b>333</b></p>
</div>
<div class="four">
<div class="zhen"></div>
<h3>郑新</h3>
<p><b>瓦学弟，沉迷于无畏契约</b></p>
</div>
<div class="five">
<div class="li"></div>
<h3>李桐</h3>
<p><b>金铲铲运营大师，埋头干饭的米饭仙人</b></p>
</div>
</template>
<script setup>
</script>
<style lang="css" scoped>
h1 {
text-align: center;
}
p {
text-indent: 2em;
margin: 15px;
}
video {
margin-top: -30px;
margin-left: -10px;
height: 900px;
z-index: -1;
position: absolute;
}
/* 第一个///////////////////////////////////////////////////////////////////////////////////////// */
.one {
float: left;
text-align: center;
margin: 30px;
height: 300px;
width: 400px;
background-color: rgba(246, 61, 61, 0.2);
border-radius: 50px 50px 50px 50px;
}
/* 头像 */
.gao {
height: 80px;
width: 80px;
border-radius: 50px 50px 50px 50px;
margin-left: 160px;
margin-top: 10px;
margin-bottom: -20px;
background-image: url('..\public\
img\gao.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* 第二个 */
.two {
float: left;
text-align: center;
margin: 30px;
height: 300px;
width: 400px;
background-color: rgba(255, 101, 234, 0.2);
border-radius: 50px 50px 50px 50px;
}
/* 头像 */
.su {
height: 80px;
width: 80px;
border-radius: 50px 50px 50px 50px;
margin-left: 160px;
margin-top: 10px;
margin-bottom: -20px;
background-image: url('..\public\
img\su.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.b {
height: 60px;
width: 220px;
margin-left: 25px;
transform: rotate(35deg);
position: absolute;
}
/* 第三个 */
.three {
float: left;
text-align: center;
margin: 30px;
height: 300px;
width: 400px;
background-color: rgba(81, 205, 254, 0.2);
border-radius: 50px 50px 50px 50px;
}
/* 头像 */
.wen {
height: 80px;
width: 80px;
border-radius: 50px 50px 50px 50px;
margin-left: 160px;
margin-top: 10px;
margin-bottom: -20px;
background-image: url('..\public\
img\wen.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* 第四个 */
.four {
float: left;
text-align: center;
margin: 30px;
height: 300px;
width: 400px;
background-color: rgba(132, 252, 77, 0.2);
border-radius: 50px 50px 50px 50px;
}
/* 头像 */
.zhen {
height: 80px;
width: 80px;
border-radius: 50px 50px 50px 50px;
margin-left: 160px;
margin-top: 10px;
margin-bottom: -20px;
background-image: url('..\public\
img\zhen.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* 第五个 */
.five {
float: left;
text-align: center;
margin: 30px;
height: 300px;
width: 400px;
background-color: rgba(249, 197, 76, 0.2);
border-radius: 50px 50px 50px 50px;
}
/* 头像 */
.li {
height: 80px;
width: 80px;
border-radius: 50px 50px 50px 50px;
margin-left: 160px;
margin-top: 10px;
margin-bottom: -20px;
background-image: url('..\public\
img\li.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
</style>我的视频背景怎么没有自动播放
本文探讨了使用CSS margin-top负值移动元素时，虽然改变了元素的层叠位置，但为何图片仍然显示在最上层的问题。深入解析CSS渲染机制与层叠上下文，为前端开发者提供解决方案。
扫一扫
2834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
