我正在使用
HTML5视频元素作为背景图层,但是,它会导致页面上其他元素与背景图像的属性background-attachment：fixed的问题.背景图像变得松弛,分解或完全消失.如果我将视频包装器div的z-index更改为一些积极的东西,则问题消失,但是将使用它作为背景层的目的失败.这个问题只发生在Webkit浏览器(Chrome和Safari)中.
这是基本的HTML：
<section class="fixed-background">
<p>...</p>
</section>
<section>
<div class="video-background">
<video loop autoplay muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>
<p>...</p>
</section>
<section class="fixed-background">
<p>...</p>
</section>
和CSS：
.fixed-background {
background: url('image.jpg') center center;
background-size: cover;
background-attachment: fixed;
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.video-background video {
min-width: 100%;
min-height: 100%;
}
我创建了一个示例JSFiddle的示例.在Firefox中工作正常,但Chrome / Safari中断.
解决方法
你找到一个修复吗？
我有同样的问题,但只有在野生动物园.
我有同样的问题,但只有在野生动物园.
编辑
这个帖子在这里为我修复.
Chrome position:fixed inside position:absolute breaking with iframe / video
将其添加到所有位置：fixed;分子
-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);
