视频似乎全屏工作得很好。唯一的问题是我看不到我的标题。视频似乎正在超越他们。我只想在视频之外向下滚动时看到标题。
有谁知道解决方案？
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
header {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: transparent;
z-index: 1;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}<body>
<header>
<video poster="messi.jpg" autoplay="true" loop>
<!-- <source src="ships.mp4" type="video/mp4"> -->
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
</header>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</body>您已经将position:absolute用于标头和视频，height:100vh用于视频。这部分正在制造问题。将高度更改为 100% 和位置：相对。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
header {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
z-index: 1;
}
video {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}<body>
<header>
<video poster="messi.jpg" autoplay="true" loop>
<!-- <source src="ships.mp4" type="video/mp4"> -->
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
</header>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</body>