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

Question

我想对css-sprites使用background-size。是否可以在没有浏览器缩小图像的情况下使用此属性？我想要实现的是隐藏未包含在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>

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