17

以下の 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;
}

しかし、スクロールはまだ非常に遅いです。

4

8 に答える 8

17

私はここに貢献するだけだと思った。background-attachment を使用するのではなく: 修正済み。use :before and position: fixed; 問題はソートされました。私はこの同じ問題に遭遇しました。

詳細はこちら: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

于 2016-04-14T17:02:42.620 に答える
13

私は同じ問題を抱えていて、このjQueryプラグインを使用して解決しました: http://srobbin.com/jquery-plugins/jquery-backstretch/

CSS3 プロパティは使用しませんが、問題なく動作し、Chrome 13 または Firefox 6 でパフォーマンスの問題はありません。

于 2011-08-31T16:31:33.477 に答える
6

プロパティを削除すると、問題は解決しbackground-sizeます。問題を引き起こしていたのは、大きな画像のスケーリングだったと思います。それでもうまくいかない場合は、背景画像を完全に削除してください。ただし、大きな背景画像が遅延を引き起こすということは聞いたことがありません。

于 2011-08-12T01:31:54.440 に答える