9

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

4

3 回答 3

17

你找到解决办法了吗？我有同样的问题，但仅限于野生动物园。

编辑 这篇文章在这里为我修复了它。

Chrome 位置：固定内部位置：与 iframe / 视频绝对中断

将此添加到所有位置：固定；元素

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
于 2013-10-24T08:22:03.930 回答
2

只需使用样式规则将 HTML5 视频包装在 dom 元素中 position: relative; 和溢出：隐藏；这将修复所有浏览器中的所有问题！

于 2015-09-04T08:52:21.060 回答
1

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

但是，我能够让它工作。在声明background-attachment: fixed我添加的元素内<img style="height: 1px; width: 1px; position: fixed;">

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

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

这是JSFiddle

编辑：

这不适用于Chrome 35 Ubuntu

于 2014-08-06T20:53:32.890 回答