3

たとえば、ホバー付きのスプライトとして 3 つの異なる画像を持っています。

たとえば、スプライトの場合

<div class="sprite normal"></div>

このタイプいらない！

/* small */
    .small{ width:20px; height:20px; }
    .small .sprite{ background:url(sprite.png) 0 0 no-repeat; }
    .small .sprite:hover { background:url(sprite.png) 20px 0 no-repeat; }
/* normal*/
    .normal{ width:50px; height:50px; }
    .normal .sprite{ background:url(sprite.png) 0 0 no-repeat; }
    .normal .sprite:hover { background:url(sprite.png) 50px 0 no-repeat; }
/* big */
    .big{ width:100px; height:100px; }
    .big .sprite{ background:url(sprite.png) 0 0 no-repeat; }
    .big .sprite:hover { background:url(sprite.png) 100px 0 no-repeat; }

短い方法はありますか？ありがとうございました..

4

2 に答える 2

1 
.sprite{ background:url(sprite.png) 0 0 no-repeat; }

/* small */
    .small{ width:20px; height:20px; }
    .small .sprite:hover { background:url(sprite.png) 20px 0 no-repeat; }

/* normal*/
    .normal{ width:50px; height:50px; }
    .normal .sprite:hover { background:url(sprite.png) 50px 0 no-repeat; }

/* big */
    .big{ width:100px; height:100px; }
    .big .sprite:hover { background:url(sprite.png) 100px 0 no-repeat; }
于 2013-09-27T09:49:19.157 に答える
0 
.sprite { background: url('sprite.png') 0 0 no-repeat; }

.small { width: 20px; height: 20px; }
.small:hover { background-position: 20px 0; }

.normal { width: 50px; height: 50px; }
.normal:hover { backgorund-position: 50px 0; }

.big { width: 100px; height: 100px; }
.big:hover { background-position: 100px 0 }

これらはすべて必要なスタイルであることは間違いありません。ルールが少なくても目標を達成することはできません。

于 2013-09-27T09:55:54.293 に答える