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

Question

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

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>

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