Question

我已经搜索过并搜索过，但我无法为我的生活找出背景依据的错误。我不能让它摆脱div。为简洁起见，here is a fiddle for you to observe and test。我正在使用Skrollr.js这可能是一个因素FYI 向上移动的第二个面板是我所指的那个面板。通过＆＃34;免费＆＃34;我的意思是＃panel-2背景与＃panel-2 div一起移动以覆盖第一个面板而不是＃panel-2背景固定在视口的顶部并且显示＆＃34;显示＆＃34;通过＃panel-2 div移动到视口中。

<div id="panel-2" class="panel" data-0="transform:translate3d(0%,100%,0)" data-200p="transform:translate3d(0%,0%,0)"></div>


#panel-2 {
    background: url('http://dev.synergexis.com/skp/example-img/panel-2-bg.jpg') no-repeat center center;
    background-size: cover;
    background-attachment:fixed;
    transform:translateZ(0%, 100%, 0);
    -ms-transform:translateZ(0%, 100%, 0);
    /* IE */
    -moz-transform:translateZ(0%, 100%, 0);
    /* Firefox */
    -webkit-transform:translate3d(0%, 100%, 0);
    /* Safari Chrome */
    -o-transform:translateZ(0%, 100%, 0);
    /* Opera */
    z-index:-2;
}

Here is an example of the behavior.由于惊人的，我讨厌西红柿＆＃39;，Petr Tichy ......标题下方的第二部分，红色和蓝色的星星和点是我想模仿的效果。

Answer 1

尽量避免使用css 3dtranslations，你试图模仿的工作skrollr演示并没有使用它们。我已经阅读了一些有关css 3dtranslations的投诉，忽略了之前将视频内容修复到视口。删除后，后台附件应该开始工作。

背景附件：固定;不工作

1 个答案: