位置:固定在一个溢出:隐藏父-跨浏览器替代背景附件:固定

Question

我有一个相当常见的用例，一个带有一系列大图像的营销页面，我希望的行为像background-attachment:fixed，但避免使用该方法出现相当严重的性能问题。

通过使用包装器div，与position:relative; z-index:0; overflow:hidden周围的全屏固定div包含的图像，效果是完全我想在Chrome和Safari(我已经测试到目前为止):

http://codepen.io/geelen/pen/FxyKj

在Firefox上，overflow:hidden似乎没有任何影响，所以页面上的三个图像都是在另一个上面呈现全屏的。目前还没有机会测试IE，但如果我能得到至少Chrome & &;Firefox正常工作好好表现，这是一个开始。

有趣的是，放弃z-index:0也会破坏Chrome的效果，因为position:relative具有自动z-index并没有引入新的堆叠上下文，这似乎是导致overflow:hidden产生效果的原因。我想知道是否有一种方法可以让Firefox以类似的方式渲染?

Answer 1

如何使用这段代码?http://codepen.io/anon/pen/vFJxk

.image {
  transform: translateZ(0);
  background-size: cover;
  //position: fixed;
  //top: 0;
  //left: 0;
  //z-index: 0;
  height: 100%;
  width: 100%;
  background-position: 50% 50%;
  background-attachment:fixed;
  overflow: hidden;

我已经在ie11中检查过了，它工作得很好