我正在尝试使用纯 CSS 创建视差效果，该效果在第一帧上也有视频背景。该效果在 Firefox 和 IE9+ 中运行良好，但 Chrome 对所有带有“background-attachment: fixed”的帧都有撕裂效果。
之前我确实设法在这里找到了一个答案，它使用了一个奇怪的 HTML 布局和 CSS 剪辑，但我似乎再也找不到了。该代码的问题是我无法将框架设置为最小高度并允许内容在较小的视口(viewport)上轻松回流。
这里有很多类似的问题，但似乎没有一个真正得到解答，或者它们引用的是一个现在似乎已修复的旧错误。如果我删除视频，背景附件属性将按预期运行。也许这些问题是相关的？
示例:http://codepen.io/cluke009/pen/cdHJu
HTML
<div id="slide0" class="slide"></div>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide3" class="slide">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide4" class="slide"></div>
<div id="slide5" class="slide"></div>
CSS
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p{
margin: 0;
padding: 10px 5%;
}
video {
z-index: -9999;
position: fixed;
right: 0;
bottom: 0;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
}
.slide {
box-sizing: border-box;
height: auto;
min-height: 100%;
min-width: 100%;
background-size: cover;
box-shadow: inset 0 10px 10px rgba(0,0,0,.3);
}
.slide:nth-child(even) {
background-attachment: fixed;
}
#slide1{
background-image:url(http://www.placekitten.com/1000/900);
}
#slide2{
background-image:url(http://www.placekitten.com/600/400);
}
#slide3{
background-image:url(http://www.placekitten.com/1000/1000);
}
#slide4{
background-image:url(http://www.placekitten.com/1000/800);
}
最佳答案
我认为撕裂效果意味着从有小猫和文字的画面到下一个孤独的影子的奇怪间隙。
您的问题可能重复 Chrome issue with background-attachment fixed and position fixed elements
关于html - 带有视频背景的纯CSS视差效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26723723/