使用background-size而不缩放图像

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> 

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