html - 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>
推荐阅读
- ios - @ObservedObject 不发布对 View 的更改
- java - 如何让我的代码的最后一行打印小数点后 2 位的所有值?
- c++ - 将结构字段的类型扩展为可变参数模板参数
- python - 有没有办法通过 python 和网络浏览器获取 HTML 文本?
- javascript - 渲染后反应从孩子那里获取元素
- r - 将矩阵转换为数据框
- java - 如何在java中使用新值更新字符串?
- api - 如何在 openproject 中使用 API.v3 上的“_links”属性参数进行过滤
- scala - 如何用 reducebykey 替换 distinct()
- python - 使用规范化器在 sklearn 预处理中保留列名