1

ユーザーランクの画像を CSS スプライトに設定しようとしてきました..これまでのところ、次のコードを作成しました: additional.css:

#ranks li {
    background: url(/rank-sprite.png) no-repeat top left;
}
.sprite-admin{ background-position: 0 0; width: 157px; height: 44px; } 
.sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; } 
.sprite-bugabuser{ background-position: -414px 0; width: 157px; height: 44px; } 
.sprite-coder{ background-position: -621px 0; width: 157px; height: 44px; } 
.sprite-donator{ background-position: -828px 0; width: 157px; height: 44px; } 
.sprite-exdonator{ background-position: -1035px 0; width: 157px; height: 44px; } 
.sprite-hondonator{ background-position: -1242px 0; width: 157px; height: 44px; } 
.sprite-legdonator{ background-position: -1449px 0; width: 157px; height: 44px; } 
.sprite-member{ background-position: -1656px 0; width: 157px; height: 44px; } 
.sprite-middleman{ background-position: -1863px 0; width: 157px; height: 44px; } 
.sprite-moderator{ background-position: 0 -94px; width: 157px; height: 44px; } 
.sprite-mudkip{ background-position: -207px -94px; width: 150px; height: 50px; } 
.sprite-newcomer{ background-position: -407px -94px; width: 157px; height: 44px; } 
.sprite-pikachu{ background-position: -614px -94px; width: 150px; height: 50px; } 
.sprite-recoverer{ background-position: -814px -94px; width: 157px; height: 44px; } 
.sprite-robot{ background-position: -1021px -94px; width: 150px; height: 50px; } 
.sprite-snorlax{ background-position: -1221px -94px; width: 150px; height: 50px; } 
.sprite-superdonator{ background-position: -1421px -94px; width: 157px; height: 44px; } 
.sprite-unicorn{ background-position: -1628px -94px; width: 300px; height: 100px; }

実際のランク:

しかし、それは機能しません..常に .sprite-admin{ background-position: 0 0; を表示します。幅: 157px; 高さ: 44px; 1..これも左上のものです。

私は何か間違ったことをした？それとも、vBulletin と関係があるように聞こえますか?

ありがとう

4

2 に答える 2

0

次のように書きます。

#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }

#ranks li（.sprite-adminなど）のような単一のクラスよりも強力であるためです。そのため、プロパティをオーバーライドするには、スプライト クラスの機能を強化する必要があります。

また

あなたは他のことをすることができます。次のように書きます。

li {
    background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat top left;
}

これの代わりに ：

#ranks li {
    background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat top left;
}
于 2012-05-17T06:43:30.247 に答える
0

バックグラウンドの位置ランクを設定しないでください

#ranks li {
        background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat;
    }
于 2012-05-17T07:03:42.900 に答える