如何解决在CSS中的视频右下角叠加div
是否可以像下面的示例中那样在video
元素上覆盖某些内容而不必设置容器div
的高度和宽度?
.container {
position: relative;
width: 640px;
height: 360px;
}
.overlay {
position: absolute;
bottom: 0px;
right: 0px;
font-size: 18px;
padding: .2em .2em;
background-color: #fefefe;
}
video {
position: absolute;
}
<div class="container">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_5MB.mp4" width="640" height="360"></video>
<div class="overlay">Overlay</div>
</div>
解决方法
我发现的一种解决方案是将视频元素的宽度和高度设置为容器div大小的100%。
我修改了代码段,以便您可以检查以下结果。
.container {
position: relative;
}
.overlay {
position: absolute;
bottom: 0px;
right: 0px;
font-size: 18px;
padding: .2em .2em;
background-color: #fefefe;
z-index: 999;
}
video {
width: 100%;
height: 100%;
}
<div class="container">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_5MB.mp4" width="640" height="360"></video>
<div class="overlay">Overlay</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。