我的固定背景使网站滚动速度非常慢,我该怎么做才能改进它？

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;
}

但滚动时仍然很慢.

Answer 1

我遇到了同样的问题并使用这个jQuery插件解决了它:http: //srobbin.com/jquery-plugins/jquery-backstretch/

它不使用任何CSS3属性,但它工作正常,并且在Chrome 13或Firefox 6上没有任何性能问题.

Answer 2

我以为我会在这里做出贡献.而不是使用background-attachment:fixed; 使用:之前和位置:固定; 问题排序.我遇到了同样的问题.

点击此处了解更多信息:http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

Answer 3

当我删除background-size属性时,问题就消失了.我认为这是导致问题的大图像的缩放.如果这不起作用,只需完全删除背景图像.但是,我从来没有听说过导致滞后的大背景图像.