请看这里的背景效果: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%;
时,效果又回来了,但视频看起来不像我想要的那样。所以我真的被困住了。
最佳答案
尝试将z-index:-2;
添加到.dzen_bg
。因为我看到您在 #video-container
上有 z-index:-1;
。我想它会解决你的问题。
关于css - 当我添加视频标题 -chrome 时,背景不会保持固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32023161/