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时，效果又回来了，但视频看起来并不像我想要的那样。所以我真的被卡住了。

到目前为止我尝试了什么？

我 - 我尝试将z-index:-2;添加到.dzen_bg。它实际上解决了它。但另一个问题发生了。在那之后，我不能再在该div .dzen_bg的内部悬停。不响应鼠标移动。

II-我删除了height: 70%中的#video-container。解决问题，但我现在如何设置视频高度？它现在覆盖了整个屏幕。我还尝试将height: 70%设置为video.fillWidth，但视频不再覆盖屏幕。

我从未对此感到困惑。有没有解决这个问题的方法？

我添加视频标题（chrome）时固定的背景不起作用

0 个答案: