css - 全屏背景 html5 不适用于 google chrome 浏览器

Question

我制作了一个全屏背景的网站。它在 Safari 和 IE 上运行良好，但在 Google Chrome 上运行不佳，视频不居中并且在屏幕右上角被完全剪切。

CSS 和 HTML:

#Video-Background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

<video id="video-background" autoplay="autoplay" loop>
    <source src="Reel 2015-simovie.webmhd.webm" type="video/webm">
    <source src="Reel 2015-simovie.mp4" type="video/mp4">
    <source src="Reel 2015-simovie.oggtheora.ogv" type="video/ogg">
</video>

请看一下我的，这样您就会在 simovie-p.com 上看到它的样子.

Answer 1

看来您的视频居中代码不正确。您将 left 和 top 都设置为 0。您尝试使用的转换居中技巧需要 left 和 top 都为 50%，转换为 -50% 。

#Video-Background {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

如果您不包括 -webkit- (Safari) 和 -ms- (IE9) 供应商前缀，这可能在 IE 和 Safari 中有效transform，或不支持转换的 IE8 及更早版本，或与此相关的视频元素。

(在您的示例中，您的 ID 选择器中的字母大小写也不同，但您网站上的情况并非如此，所以我猜这不是您的问题。)