css - 限制标题背景视频的高度?
问题描述
我正在处理放置在标题中的背景视频。页眉只有 100%-257px 的高度,因此页面的其余部分在加载页面时可见。但是,我无法让视频成为标题中的完整背景。在全尺寸时,它总是溢出标题容器。我错过了一些CSS吗?非常感谢你的帮助!
html:
<header id="home">
<div id="videoBackground">
<video loop="loop" playsinline="playsinline" autoplay="autoplay" muted="muted" poster="Images/posterImg.png" id="videoBackgroundVideo">
<source type="video/mp4" src="Images/BillVid.mp4">
</video>
</div>
<h1> This is a title</h1>
<h2> This is a subtitle</h2>
<div id="welcomeMessage">
<h3> Welcome at <span>My Page</span></h3>
<img src="Images/LogoRoundWhite.png" id="homeLogoWhite" style="border-style:none;" />
</div>
</header>
CSS:
header{
padding-top: 100px;
padding-bottom: 30px;
margin-top: 0px;
min-height: 400px;
text-align: center;
height: calc(100% - 257px);
justify-content: center;
overflow: hidden;
}
#videoBackground {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -10;
}
#videoBackgroundVideo {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
解决方案
尝试添加
header {
position:relative;
}
绝对定位元素将使用 position:relative 相对于最近的父元素定位自己;
如果这不存在,它只会相对于我相信的 body 标签定位自己,这也是为什么溢出:隐藏可能没有效果。
推荐阅读
- mysql - 用于事件监视器的 mysql 脚本以查找并终止满足特定条件的卡住/旧/空闲/睡眠 db 会话
- kubernetes - Kubernetes Ingress Skaffold 文档
- java - 变量 INSIDE (null) 和 OUTSIDE (!null) 的范围是 Java 中的 LISTENER
- github-actions - Github Actions Rails Postgres 数据库“测试”不存在
- angular - 使用 form.patchvalue 后,Angular Reactive Form 子组件未显示值
- excel - Excel帮助:计算一列最后4个元素的加权平均值
- python - PANDAS:另一种写 [x.index[-1]+1 for x in df
- javascript - 以html形式输入日期后如何修复400错误请求错误?
- python - Python:跨模块使用字典
- c# - 如何获取当前的 PowerPoint 幻灯片编号