css - 画像をスケーリングせずに background-size を使用する

Question

css-sprite に background-size を使用したい。ブラウザで画像を縮小せずにこのプロパティを使用することはできますか? 私が達成したいのは、背景サイズに含まれていないスプライトの部分を非表示にすることです。

Answer 1

スプライトの一部を非表示にするために背景サイズを使用する必要はありません。css クラスでは、ピクセル値を使用して使用するスプライトの部分を指定する必要があります。

CSS:

#groupIcon{width:70px; height:70px;}
.groupIcon1{background:url(../images/groupIconsSprite.png) 0 0;}
.groupIcon2{background:url(../images/groupIconsSprite.png) -70px 0;}
.groupIcon3{background:url(../images/groupIconsSprite.png) -140px 0;}
.groupIcon4{background:url(../images/groupIconsSprite.png) -210px 0;}
.groupIcon5{background:url(../images/groupIconsSprite.png) -280px 0;}

次に、問題のdivのクラスを変更するだけで、スプライトの目的のセクションが使用されます

<div id="groupIcon" class="groupIcon1"></div>

また

<div id="groupIcon" class="groupIcon2"></div>

これで問題が解決しない場合は、もう少し具体的にコード スニペットを提供する必要があります。