chrome 上奇怪的背景渲染，而 background-attachment:fixed;答案

【问题标题】：Strange background rendering on chrome while background-attachment:fixed;chrome 上奇怪的背景渲染，而 background-attachment:fixed;
【发布时间】：2013-11-21 20:30:35
【问题描述】：

我希望我的背景被修复，我这样做了很多次，但是这次当我滚动它时，它会无缘无故地扭曲，我设法让导航栏不扭曲而不是添加

  -webkit-transform: translateZ(0);

到它，但我不知道如何修复背景。它只发生在 Chrome 上，适用于 IE。 http://imgur.com/pANZViI

这是演示： http://klaunfizia.pl/damian/

这是css：

background:url(images/background.jpg) #ff7400 no-repeat left top;
background-size: 100%;
background-attachment:fixed;
margin: 0 0 0 0;

【问题讨论】：

我不明白你在问什么，演示在 FF 和 chrome 上看起来一样
真的吗？你检查过imgur上的截图吗？在多台计算机上看起来是一样的。
你应该附上它不工作的图像和它工作的图像，这样我们就可以看到你正在寻找的正确行为是什么
我可以立即在 Chrome 中重现他的问题；背景不会保持固定，向上/向下滚动时会变形。在正文中添加-webkit-transform: translateZ(0); 可以修复背景，但是导航不能再保持固定了...
是的，看来我得处理它了，哈哈……

标签： html css google-chrome background fixed

【解决方案1】：

开始...清理这个 CSS 并使用：

body {
   background: url(images/background.jpg) #ff7400 no-repeat left top;
   background-size: cover;
   background-attachment: fixed;
   margin: 0;
}

然后将z-index 更改为此。它不应该是负-1。那是你的问题：

#animacja {
   position: fixed;
   top: 200px;
   right: -70px;
   z-index: 1;
}

并在您的菜单栏上修复/添加z-index，使其位于该图形上方：

#mainMenu {
   position: relative;
   height: 80px;
   width: 100%;
   background-color: red;
   position: fixed;
   -webkit-transform: translateZ(0);
   z-index: 10;
}

【讨论】：

没有问题。容易小便！ Chrome 开发者工具是你的朋友。 :)