Question

我有一个相当常见的用例，一个包含一系列大图像的营销页面，我希望表现，如background-attachment:fixed，但避免使用该方法的相当显着的性能问题

使用包装器div，position:relative; z-index:0; overflow:hidden围绕一个包含图像的全屏固定div，效果完全我想要的Chrome和Safari（我测试过）到目前为止）：

在Firefox上，overflow:hidden似乎没有任何效果，因此页面上的三个图像都全屏呈现在彼此的顶部。此刻没有机会测试IE，但如果我至少可以获得Chrome＆amp; Firefox正在运行表现很好，这将是一个开始。

有趣的是，放弃z-index:0也会影响Chrome，因为带有自动z-index的position:relative不会引入新的堆叠上下文，这似乎是导致{{{ 1}}有效果。我想知道是否有办法让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;

我已经在IE 11中进行了双重检查，它运行良好。

位置：固定在溢出内：隐藏父级 - 跨浏览器替代后台附件：修复？

1 个答案: