CSS 视差背景图像白色 Space 在 IE 中

Question

我正在使用 Keith Clark's CSS-only 方法来创建两层视差效果，以便背景图像以比网站内容的其余部分慢的速度滚动。需要说明的是，图像覆盖了整个页面，内容位于图像之上。

我的站点分为两个主要 div 元素（和一个容器 div）- 一个用于背景图像，另一个用于页面内容。下面是我用于不同 div 元素的代码。

.container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  position: absolute;
  left: 0;
  right: 0;
}

.background {
  background-image: url(images/background.jpg);
  background-size: cover;
  position: absolute;
  /* margin-bottom: -200em;
     overflow: hidden; */
  height: 200em;
  left: 0;
  right: 0;
  transform: translateZ(-2px) scale(3);
}

.page-content {
  transform: translateZ(0);
}

如果不添加 margin-bottom 和 overflow 属性，背景 div 元素在设置为高度后最终会留下垂直的白色 space足以覆盖页面的所有内容。

添加负边距后，问题在 Chrome 和 Firefox* 中得到了解决，我增加了 div 元素的高度和负边距，使其比原来的要大得多需要确保它适用于不同的页面长度。

IE 11 仍然有白色 space。通常 background-size: cover; 属性会移除任何白色 space，但这不适用于视差效果。

你知道有什么方法可以删除适用于 IE9+ 和其他主要浏览器的白色 space 吗？还是我运气不好？

这是一个 JSFiddle，其代码与我正在创建的网站几乎完全相同。

*Firefox 没有白色 space，但负边距无法在所有页面长度上正常工作。对于较短的页面，您可以滚动到页面内容的末尾。我可以通过更改每个页面的高度和边距来解决这个问题，但如果可能的话，我们将不胜感激。

Answer 1

如果您的目标是在 IE9 上运行，我认为您会遇到一些问题。这对我有用，但并非没有增加 .back div.

的尺寸高度

这适用于我的 IE9 和 Chrome，但您可能只需要一些 IE 条件。

http://jsfiddle.net/Lawrg9mv/21/

增加：

.back {
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3);
}

.front {
    -ms-transform: translateZ(0);
    z-index: 10;
    position: relative;
}

Answer 2

目前还没有任何方法可以让 CSS 视差在 IE 中工作。但是由于基于 Webkit 的浏览器，如 Chrome 和 Opera（我还没有测试过 Safari）可以很好地处理视差，所以可以针对 Webkit 浏览器并为它们显示视差背景，并显示不同的代码 - 没有视差 -其他浏览器。

首先，我将视差代码放入 @media 查询中，如下所示：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .container {
    [rule contents]
  }

  .background {
    [rule contents]
  }

  .page-content {
    [rule contents]
  }
}

第一个属性 (-webkit-min-device-pixel-ratio:0) 针对所有基于 Webkit 的浏览器，但由于我假设并非所有版本的 Webkit 浏览器都支持这种视差效果，因此我还添加了第二个属性，它将浏览器限制为 Chrome 29+ and Opera 16+ (I excluded Safari just to be safe, but you can choose another hack 如果你发现它也适用于 Safari）。

使用feature detection可能会更好，但我还没有学会JavaScript，以上是仅CSS的解决方案。

将视差规则放入 @media 查询后，我为后面的 div 元素设置了替代默认规则。

（虽然将网站分为正面和背面 div 元素在没有视差的情况下是不必要的，但设置背面 div 元素带有背景图像而不是 body 或 html 消除了大量延迟。）

为了尽可能保持与视差版本的相似性，我将背景图像设置为 position: fixed。

因为浏览器自上而下阅读 CSS 文件并按此顺序应用样式，所以视差 .back 规则（及其周围的 @media 查询）即将到来很重要在文件中的标准、无视差.back规则之后。

当然，我确保所有适用于标准和视差 .back 规则的属性只出现在默认的规则中以保存 space（它们将被应用Webkit 浏览器以及视差版本中的附加规则）。

CSS 视差背景图像白色 Space 在 IE 中

CSS Parallax Background Image White Space in IE

css

background-image

whitespace

parallax