使用背景大小而不缩放图像

Question

我想对css-sprites使用背景尺寸。是否可以在不使用浏览器缩小图像的情况下使用此属性？我想要实现的是隐藏未包含在背景大小中的精灵部分。

Answer 1

你不需要使用背景尺寸来隐藏精灵的一部分。在css类中，您应该使用像素值指定想要使用的sprite的哪一部分，即：

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的类，然后将使用sprite中所需的部分

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

或

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

如果这不能解决您的问题，那么您将不得不更具体一点，并提供代码片段