背景-附件:固定；不工作

Question

我已经搜索了，但我不能，为了我的生活，找出我的背景附件有什么问题。我不能让它从潜水器中解脱出来。为了简洁起见，这里有一个小提琴供你观察和测试。我正在使用Skrollr.js，这可能是FYI的一个因素。

第二个面板向上移动的第一个是我指的那个。我的意思是#面板-2背景与#面板-2 div一起运行，以覆盖第一个面板，而不是#面板-2背景被固定在视口顶部，并由#面板-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;
}

下面是这种行为的一个例子。由神奇的，我讨厌番茄‘，佩特蒂奇.第二个部分就在标题下面，上面有红蓝两色的星星和点，这是我想模仿的效果。

Answer 1

尽量避免使用css 3翻译，您想要模仿的工作skrollr演示不使用它们。我以前读过一些关于css 3翻译的抱怨，忽略了将内容修改到viewport。一旦移除它们，背景附件就会开始工作。