我的固定背景使得网站滚动非常缓慢，我该怎么做才能改善它？

Question

我使用以下CSS更改了我的讨论论坛的背景:

http://forum.antinovaordemmundial.com

html {
    background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 50%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这张图片的尺寸为1600x711，大小为88k。页面滚动现在变得非常缓慢。是CSS出了问题还是图片应该以某种方式缩小？

编辑：我试着改成：

body {        
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
    background-attachment: fixed;
    background-clip: initial;
    background-color: #51010E;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-origin: initial;
    background-position: initial initial;
    background-repeat: initial initial;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

但是在滚动时还是非常缓慢。

- Emerson

---

我正在使用Chrome，但我也尝试过Firefox。 - Emerson

我在Chrome 13中遇到了一些延迟，导致滚动时CPU使用率很高。如果删除背景图片，问题是否会消失？ - John Stimac

在Chrome 13中CPU使用率过高+1——当滚动时，它会占用我一个核心的100%。 - STW

此外，从设计角度来看，当内容的宽度保持不变时，似乎将背景调整大小可能是一个不好的主意。看起来你试图使用背景使中间区域发白发光。这只有在它们动态地协同缩放时才能正常工作。 - John Stimac

Jcubed，我删掉了图片并改变了背景颜色，这解决了延迟问题。可惜啊。 - Emerson

Answer 1

我想在这里做出贡献。不要使用background-attachment: fixed;，而是使用:before和position: fixed;问题就解决了。我遇到了同样的问题。

阅读更多信息：http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

- user2810762

---

棒极了的解决方案。没有使用jQuery，只用了纯CSS3！ - TetraDev

这在使用background-attachment时无法处理多个元素。 - all jazz

这是我现在在谷歌上的第一个搜索结果，它完美地解决了我的问题。这应该被接受为答案。 - Luca Steeb

也发现了这个解决方案。我有一个按部分背景的背景，当你滚动时，每个透明的位都有自己的固定背景。不幸的是，在那种情况下这个技巧不起作用。 - Julian F. Weinert

这是我认为最好的解决方案。 - Reasoned

Answer 2

我遇到了同样的问题，使用了这个jQuery插件来解决它： http://srobbin.com/jquery-plugins/jquery-backstretch/ 它不使用任何CSS3属性，但在Chrome 13或Firefox 6上运行良好且没有性能问题。

- kossdav

---

是的，我喜欢使用CSS和背景来避免阻塞页面渲染。点赞并感谢！ - eduncan911

Answer 3

当我移除background-size属性时，问题就消失了。我认为是大图像的缩放引起了问题。如果这样还不行，可以直接移除背景图像。但是，我以前从未听说过大背景图像会导致滞后的情况。

- John Stimac

---

background-size 属性肯定产生了影响，但是如果禁用它，网站仍然似乎滚动缓慢。我会说这是 100％ 的改善，但还存在问题。 - STW

是否有适合替代background-size的选项？我在滚动时遇到了同样的延迟问题，而且使用的图片大小和文件大小也差不多。 - Robbie

可能不是图像本身的大小，但我猜测浏览器每帧都在某种原因下调整图像大小。只是猜测。 - Hawken

这并不是解决方案。“移除你的代码就能使它正常工作”，开玩笑吧。 - tobi.at

我的图片尺寸非常大，所以当我调整大小时，它能够正常工作，而不需要移除背景大小："cover"。 - M_abosalem

Answer 4

此外，在WebKit浏览器（包括Chrome）中，将以下样式应用于html标签可以显著提高帧率：

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

这适用于所有情况下使用（大型）背景照片和卡顿滚动的情况，据我所知。

- TNF

Answer 5

将背景大小设置为99.9％而不是100％或在固定附件的情况下使用封面。

background-size : 99.9%;

- Karbs

Answer 6

问题实际上出在background-attachment属性的fixed值上，如果将其改为background-attachment: scroll以适应移动设备，就可以解决卡顿问题。

- WPExplorer

Answer 7

如果您已经包含background-repeat属性并且不使用100%的值来设置background-size，请将其移除。

background-size: 0 - 99.9%;

- Arunkumar09

Answer 8

压缩图像（减小大小）解决了我的问题，我强烈推荐使用像Radical Image Optimization Tool (RIOT)这样的工具，非常有效且易于使用。

在Linux上，可以使用GIMP来完成此操作，您还可以删除图像的元数据以减小大小，使用exiftool等工具。

- Exil

Answer 9

将您的图像文件类型更改为SVG在遇到相同问题时显着提高了我的网站性能！

- Andy Clarke

---

这不是一个答案。 - RKRK