如何解决div 内的视频背景和文本不随页面的其余部分滚动?
我正在尝试制作带有文本的视频背景以某种方式定位,但是当我向上滚动整个页面时,文本和视频不滚动/移动?我做错了什么?
position: fixed;
right: 0;
bottom: 0;
min-width:100%;
min-height:100%;
color: #fff;
z-index:0;
text-shadow: 0 0 5px #000000;
}
.overlayText {
position: fixed;
top: 25%;
left: 25%;
color:#fff;
z-index:1;
}
<div class="bannervideo">
<video autoplay loop muted class="bannervideo" poster="video.jpg">
<source src="/s/Blueheadervideos.mp4" type="video/mp4">
</video>
<center><div class="overlayText">
<p style="font-size:3vw; font-weight: 500;">Headline here</p>
<p style="font-size:1.5vw; font-weight: 500;">tagline</p> </div>
<div class="overlaybottomText">
<p style="font-size:1.5vw;">More words go here </p>
</div> ```
解决方法
两个选择器上的 position: fixed;
将固定相对于窗口的元素。尝试 position: absolute
代替 .overlayText
.overlayText {
position: absolute;
top: 25%;
left: 25%;
color:#fff;
z-index:1;
}
和 position: absolute
或 position: relative
用于父元素 .bannervideo
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。