0

私のページでcssスプライトを動作させようとしています。しかし、background-repeat:no-repeat を追加すると。その後、css スプライトが機能しなくなります。スタイルシートから削除すると、再び機能します。

background-repeat を使用できない理由がわかりませんでした。

これが私のコードです。jsfiddle にもアップロードします。そこでテストできます。

http://jsfiddle.net/F49b5/2/

        <html>
        <head>
            <style type="text/css">
                #logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on
                {
                    background-image: url("http://i14.photobucket.com/albums/a332/007bond-jb/food/burger2.jpg");
                    overflow: hidden;
                    background-repeat: no-repeat;  /*this is the problem, remove it, it will work */
                }
                #logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, .flag-off, .vote-accepted-off, .vote-accepted-on
                {
                    font-size: 1px;
                    text-indent: -9999em;
                }

                #logo a
                {
                    background-position: 0 194px;
                    width: 309px;
                    height: 133px;
                    display: block;
                }
            </style>
        </head>
        <body>
            <div id="logo">
                <a href="/" title="test">test</a>
            </div>
        </body>
        </html>
4

2 に答える 2

2

background-positionを194pxではなく-194pxに切り替えてみてください。

#logo a
{
    background-position: 0 -194px;
    width: 309px;
    height: 133px;
    display: block;
}

y軸を194pxに設定すると、背景画像が194px下に押し下げられます。これは、＃logoの高さのビューの外にあります。代わりに、y軸を負の数に設定して、画像を「プルアップ」する必要があります。

于 2012-05-30T15:49:33.687 に答える
0

ボックスの高さの外側に背景位置を設定しました。

繰り返しは、要素の0：0から画像全体を繰り返します。これが、画像が表示される理由です。

背景の位置を削除すると、機能します。

于 2012-05-30T15:50:31.147 に答える