Question

我正在使用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中中断。

Answer 1

你找到了解决方法吗？我有同样的问题，但仅限于徒步旅行。

修改这篇文章在这里为我修好了。

Chrome position:fixed inside position:absolute breaking with iframe / video

将此添加到所有位置：已修复;元素

-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);

Answer 2

将HTML5视频包含在dom元素中，并使用样式规则position：relative;溢出：隐藏;这将修复所有浏览器中的所有内容！

Answer 3

我遇到了同样的问题。 Corey的修复程序无法解决我的background-attachment: fixed元素的错误。

然而，我能够让它发挥作用。在声明background-attachment: fixed的元素内，我添加了<img style="height: 1px; width: 1px; position: fixed;">

我不完全确定为什么会这样，但我相信它是因为1x1像素强制浏览器重绘父元素。

PS：它不一定是img元素，它可以是任何元素。

以下是JSFiddle

修改

NOT 可以在Chrome 35 Ubuntu上运行

具有负z-index的绝对定位HTML5视频元素打破了webkit浏览器中的背景附件

3 个答案: