Question

我最近注意到，我的网站包含由parallaxing图片div分隔的内容，已停止工作。以前，由于background-attachment: fixed;规则，图像背景相对于页面的其余部分保持静止，但现在图像div根本不显示，除非我删除该规则。但是，删除该规则会导致图像显示而没有所需的视差效果。

我检查了我的git提交历史记录，但找不到会破坏此系统的更改。另外，我已根据其他论坛帖子尝试了以下内容：

为所有元素添加了-webkit-transform: translate3d(0,0,0);（在html, body规则中）。
为图片div和所有父母设置position: static;。
选中Chrome开发者控制台，查看是否已应用任何干扰CSS样式。
设置background-position: static;

这些都没有帮助。我的CSS如下：

#container #image2 {
    box-shadow: inset 0px 11px 8px -10px #000, inset 0px -11px 8px -10px #000;
    background: transparent url('../../graphics/images/image-2.png') no-repeat;
    background-size: cover;
    background-position: 50% 30%;
    background-attachment: fixed;
    min-height: 330px;
    min-width: 800px;
}

The page is live here.

Answer 1

我会推荐你following solution。

非常简单，将以下内容添加到您的CSS中：

添加-webkit-backface-visibility: hidden;以再次显示图片。
添加-webkit-transform: translateZ(0x);以移除手机上的视差闪烁

CSS“background-attachment：fixed;”隐藏图像

1 个答案: