Question

请在此处查看背景效果：https://jsfiddle.net/xorkme75/embedded/result/

背景为fixed。因此，当您滚动页面时，您可以看到图像的其余部分。例如向下滚动，你可以看到女士的脸。

兼用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 -->

破损区域的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%;
}

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

Answer 1

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

Answer 2

height: 70%中有#video-container，如果删除它会正常工作。并将此高度添加到video.fillWidth

当我添加视频标题-chrome时，后台不会保持不变

2 个答案: