是否可以调整我们从 sprite 接收到的图像的大小。 我的意思是这样的：
background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;
是否可以从 sprite 更改宽度和高度？例如，如果我在精灵中有铅笔图标，分辨率为 40x40，但我想将此铅笔图标显示为 20x20 像素
提前谢谢你。
【问题讨论】：
另一种解决方案是使用 css3 的 zoom: .5; 属性。
【讨论】：
您可以在 css3 中使用background-size 属性：
background-size: 50% 50%;
【讨论】：
更改background-size 将使您每次都必须重新验证容器的width 和height。
使用zoom 时，您将不支持firefox
...
另一种选择是使用：
transform: scale(.5); /* 50% smaller */
transform: scale(1.5); /* 50% bigger */
背面是缩放后的元素仍会保留其原始空间。
【讨论】：
在谷歌搜索此答案后，我在这里找到了解决方案：https://stackoverflow.com/a/10826761/2100636
它的工作原理是它是响应式的，尽管它没有使用背景图像来做到这一点......它确实适用于所有浏览器，而不是使用 background-size 选项，它在旧浏览器中不起作用 -这个方法可以。*
*至少在我测试时是这样。
您可以在此处查看演示：http://tobyj.net/responsive-sprites/
我在左边有一个图标，右边有文字的情况下使用了这个，它会缩小我的图标以保持响应能力。
【讨论】：
2018年解决方案：
假设我们有 5X4 网格的精灵。
第一步是固定背景图片相对于大陆的大小
.sprite{ background-size: 500% 400%; }
现在我们有了响应式精灵。
接下来是使用 precente 来定位背景，这样我们的人物就会出现。计算是这样的：
background-position: calc( var(--colum) * 100% / 5 - 1) calc(var(--row) * 100% / 4 - 1);
现在我们需要在每个图中定义列和行是位置
.figure1{ --row:1, --column:0 }
.figure2{ --row:1, --column:1 }
// etc...
我们在一起：
.sprite{
background-size: 500% 400%;
background-position: calc( var(--colum) * 100% / 4) calc(var(--row) * 100% / 3);
}
.figure1{ --row:0, --column:0 }
.figure2{ --row:0, --column:1 }
.figure3{ --row:0, --column:2 }
.figure4{ --row:0, --column:3 }
.figure5{ --row:1, --column:0 }
// etc...
【讨论】：
background-size 就是你要找的东西。
#example1 {
background-size: 40px 40px;
}
#example2 {
background-size: 20px 20px;
}
【讨论】：
使用变换只会改变图像的缩放而不是大小。为了将精灵图像的大小从 40 像素 x 40 像素更改为 20 像素 x 20 像素，您需要将精灵图像的大小更改为 20 像素 x 20 像素，然后调整背景大小以适应该区域中的图像精灵。您还需要调整背景位置以显示正确的精灵部分。
#home {
width: 46px;
height: 44px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}
#resizedHome {
width: 20px;
height: 20px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
background-size: 306%;
}
#resizedNext {
width: 20px;
height: 20px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) -102px 0;
background-size: 306%;
}<h5>
Original Sprite Image
</h5>
<img id="home" ><br><br>
<img id="next" >
<br><br>
<h5>
Resized Sprite Image
</h5>
<img id="resizedHome" ><br><br>
<img id="resizedNext" >或者
【讨论】：