我有一个固定位置的视频和一些固定了背景附件的div。 在firefox和IE中一切正常,但是使用chrome,背景图像效果不佳。
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:
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;
}
我绝对需要为图像修复背景附件,因为我的网站使用视差效果。目前,我使用的解决方法是在我不需要时隐藏视频,但这远非理想。
答案 0 :(得分:2)
我认为您对视频的z-index可能会导致问题。试着把它放在后面。 JS Fiddle
.sleep-video {
left: 0;
top: 0;
position: fixed;
width: 100%;
z-index: -20;
}