固定的背景附件在 chrome 中不起作用答案

【问题标题】：background-attachment fixed not working in chrome固定的背景附件在 chrome 中不起作用
【发布时间】：2021-09-16 20:04:26
【问题描述】：

我尝试谷歌寻求帮助，这似乎是 chrome 中的一个错误，但我仍然找不到解决方案。我查看了许多与此类似的 stackoverflow 问题，但这些解决方案仍然没有帮助。

当我尝试在页面上向下滚动时，背景图像会闪烁并出现混乱。我在 Ubuntu 桌面上使用 Google Chrome 版本 35.0.1916.153

CSS 代码：

#left-container {
background-image: url('http://easource.com/wp-content/uploads/2014/07/traphouse4.jpg');
background-attachment: fixed;
background-position: -1% 0%;
background-repeat: repeat-y;
cursor: pointer;
}

你可以在http://easource.com上看到它的样子

另外，我尝试删除背景位置，但仍然不起作用。

【问题讨论】：

我使用 Chrome for Mac 36.0.1985.125，它工作正常。

标签： css google-chrome

【解决方案1】：

如此处所示：Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

尝试仅更改为position:static。

【讨论】：

我删除了背景附件：固定和背景位置。该页面现在在 chrome 中看起来不错，只是我希望修复图像，这样当您向下滚动时，bg 图像也不会滚动。
但是只是将背景位置更改为“静态”，留下附件，对您不起作用吗？
还有其他建议吗？
当我滚动时，我带有background-attachment: fixed 的背景图片会暂时消失。 position:static 为我修复了它。谢谢！（不是background-position:static，这实际上不是一件事。）
没有为我修复它，尝试了各种解决方案均无济于事。 Chrome 很烂，我不知道为什么有人会使用它。对我来说，它几乎和 IE 一样糟糕。在 Chrome for Android v64.0.3282 上测试

【解决方案2】：

您可以保持您的位置不变，并将变换属性添加到您的背景图像元素。

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

【讨论】：

这还是2018年的事情。这是最好的答案；换成 position:static 弊端太多，给孩子打乱了其他定位；这不会影响其他任何事情。

【解决方案3】：

删除overflow-y: scroll; 来自body 为我解决了这个问题。

【讨论】：

我遇到了类似的问题，即没有显示视差背景。令人惊讶的是，添加以下 css 规则解决了这个问题：.wpv-parallax-bg-img { overflow-y: scroll !important; } 我没有注意到任何意外的副作用，但这仅在 Chrome 和 Firefox 中进行了审查

【解决方案4】：

尝试添加backface-visibility: hidden;。为我工作。

【讨论】：

【解决方案5】：

使用position:static 可以正常工作；
如果不起作用，请删除 position 属性。

【讨论】：

css位置属性影响内容，而背景附件只影响背景图片。

【解决方案6】：

您必须使用这些属性来固定图像：

background-image: URL("your image path");

我 100% 确信它适用于所有浏览器。

【讨论】：