css 位置固定且背景附件固定在 chrome 上的 HTML 视频

HTML video with css position fixed and background-attachment fixed on chrome

提问by Mathew

I have a video with position fixed and a couple of div with background-attachment fixed. Everything works fine in firefox and IE but with chrome, the background images don't display well.

我有一个位置固定的视频和几个固定背景附件的 div。在 Firefox 和 IE 中一切正常，但使用 chrome，背景图像显示效果不佳。

http://jsfiddle.net/V74WH/2/

http://jsfiddle.net/V74WH/2/

HTML:

HTML：

 <video class="sleep-video" autoplay>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
 </video>

 <div class="section one"></div>
 <div class="section two"></div>
 <div class="section three"></div>

CSS:

CSS：

    body, html {
      padding: 0;
      margin:0;
      height: 100%;
    }

    .section {
      width: 100%;
      height: 100%;
      background-attachment: fixed;
      background-size: 100% 100%;
      position: relative;
      background-color: white;
      z-index: 2;
    }

    .section.one,
    .section.three {
      background-image: url(http://www.maximumpc.com/files/u160391/chrome_0.png);
    }

    .section.two {
      background: none;
    }

    .sleep-video {
        left: 0;
        top: 0;
        position: fixed;
        width: 100%;
        z-index: 1;
    }

I absolutely need to have background-attachment fixed for the images because my site use parallax effects. Currently, the workaround that I use is to hide the video when I don't need it but it's far from ideal.

我绝对需要为图像修复背景附件，因为我的网站使用视差效果。目前，我使用的解决方法是在不需要时隐藏视频，但这远非理想。

采纳答案by Derek Story

I think your z-index on the video may be causing issues. Try putting it behind. JS Fiddle

我认为您在视频上的 z-index 可能会导致问题。试着把它放在后面。JS小提琴

  .sleep-video {
            left: 0;
            top: 0;
            position: fixed;
            width: 100%;
            z-index: -20;
        }