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元素一旦设置为足够高以覆盖所有页面的高度，最终会留下垂直空白区域内容。

添加负边距后，问题在Chrome中得到修复，并在Firefox *中排序，我将div元素的高度和负边距增加到远远大于确保它可以工作所需的高度和负边距对于不同的页面长度。

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

你知道有什么方法可以删除适用于IE9 +和其他主流浏览器的空白区域，还是我运气不好？

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

* Firefox没有空格，但负边距对所有页面长度都无法正常工作。对于较短的页面，您可以滚动浏览页面内容的末尾。我可以通过更改每个页面的高度和边距来解决这个问题，但如果可能的话，我们将非常感谢全球解决方案。

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中工作。但是，由于像Chrome和Opera这样基于Webkit的浏览器（我还没有测试过Safari）可以很好地处理视差，因此可以针对Webkit浏览器并显示它们的视差背景，并为其他浏览器显示不同的代码 - 没有视差。 / p>

首先，我将视差代码放在@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浏览器都支持这种视差效果，我还添加了第二个属性，它将浏览器限制为{{3} （我将Safari排除在外是为了安全起见，但如果您发现它有效，您也可以Chrome 29+ and Opera 16+定位Safari）。

使用choose another hack可能是一个更好的主意，但我还没有学过JavaScript，上面是一个仅限CSS的解决方案。

将视差规则放入@media查询后，我为后div元素设置了另一种默认规则。

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

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

由于浏览器会自上而下地浏览CSS文件并按此顺序应用样式，因此视差.back规则（及其周围的@media查询）在之后非常重要文件中的标准非视差.back规则。

当然，我确保应用于标准和视差.back规则的所有属性仅出现在默认值中以节省空间（Webkit浏览器将应用它们以及其他规则在视差版本中。）

IE中的CSS视差背景图像白色空间

2 个答案: