css - 当我添加视频标题 -chrome 时，背景不会保持固定

Question

请看这里的背景效果:https://jsfiddle.net/xorkme75/embedded/result/

这里的背景是固定的。所以当你滚动页面时，你可以看到图像的其余部分。例如向下滚动，您可以看到女士的脸。

同时适用于 chrome 和 firefox。

*

但是当我将视频添加到页眉时。这种效果不再适用于 chrome。这是示例(请在 chrome 中查看):http://areafordemos.net63.net/chrome.html

我是怎么破解的？

我添加到 CSS:

#video-container {  
    top: 10%;
    width:100%;
    height:70%;
    overflow: hidden;
    z-index:-1; 
    }

video.fillWidth {
    width:100%;
    }

然后我添加到 HTML 中:

<div id="video-container">
    <video autoplay muted loop paused class="fillWidth">
        <source src="xhttp://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
        <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div><!-- end video-container -->

splinter 区域的CSS代码:

.dzen_bg {
background-image: url('http://seventhqueen.com/themes/kleo/sensei-e-learning/wp-content/uploads/sites/6/2015/06/hero16.jpg'); 
background-size: 100% 100%;
background-repeat: no-repeat; 
background-position: 100% 12px; 
background-attachment: fixed;
padding-top: 10px; 
background-size: 100% 100%;
} 

例如，当我从 video.fillWidth 中删除 width: 100%; 时，效果又回来了，但视频看起来不像我想要的那样。所以我真的被困住了。

Answer 1

尝试将z-index:-2; 添加到.dzen_bg。因为我看到您在 #video-container 上有 z-index:-1;。我想它会解决你的问题。