Question

我正在尝试使用纯CSS创建视差效果，该CSS在第一帧上也有视频背景。这种效果在Firefox和IE9 +中运行良好，但Chrome对所有框架都有撕裂效果，背景附件：固定＆＃34;。

我确实设法找到了一个答案，之前使用了奇怪的HTML布局和CSS剪辑，但我似乎无法再找到它了。该代码的问题在于我无法将帧设置为最小高度，并允许内容在较小的视口上轻松重排。

这里有很多类似的问题但是它们似乎都没有真正得到回答，或者它们引用了现在似乎已修复的旧版bug。如果我删除视频，则background-attachment属性的行为与预期一致。也许这些问题是相关的？

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);
}

Answer 1

我认为撕裂效果意味着从小猫和文字框架到下一个孤独的阴影的奇怪差距。

您的问题可能重复Chrome issue with background-attachment fixed and position fixed elements

纯视频背景的CSS视差效果

1 个答案: