css – 绝对定位的HTML5视频元素与负z指数破坏背景附件在webkit浏览器

我正在使用 HTML5视频元素作为背景图层,但是,它会导致页面上其他元素与背景图像的属性BACkground-attachment：fixed的问题.背景图像变得松弛,分解或完全消失.如果我将视频包装器div的z-index更改为一些积极的东西,则问题消失,但是将使用它作为背景层的目的失败.这个问题只发生在Webkit浏览器(Chrome和Safari)中.

这是基本的HTML：

@H_944_4@<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：

@H_944_4@.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中断.