Question

使用Mac视网膜显示器在Chrome上查看此网站http://jsfiddle.net/dN4S4/1405/时，背景未正确呈现。这是使用的CSS：

body{
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
}
#cards{
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.card-wrapper{
    width: 100%;
    height: 100%;
    background: url(url here);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.card{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.875);
    font-family: "Helvetica Neue", Helvetica, Arial;
    font-size: 14px;
    text-align: left;
    color: #FFFFFF;
}

我发现这是一个已知问题但未找到实际有效的修复方法。它在任何其他浏览器上呈现预期效果，甚至在使用“正常”显示查看网站时也能正常工作。

为简单起见，我在演示中使用相同的图像，但是我想使用不同的图像来创建“视差”效果。

请注意，身体上的“位置：绝对”不会导致此问题。它也会出现不同的“位置”和“显示”值。

有关如何正确渲染的任何建议吗？

谢谢！

Answer 1

我已经分叉并调整了您的JSFiddle，以使视差效果以我希望它能正常工作的方式工作，但您必须自己检查一下才能进行验证。

这里的主要见解是，background-attachment: fixed应该应用于不会“滚动”的父/容器div。假设您的card-wrapper类是一个非常高的容器，其中包含所有向上滚动的各个card，而所有这些都放在fixed容器中，该容器具有背景图像，保持固定在背景中。

修复了Chrome

1 个答案: