如何缩放作为background-image使用的CSS精灵图？

嘿，我来帮你搞定这个精灵图缩放的事儿！你想要把100x100px的精灵图缩小到一半，核心就是用background-size属性，但有个容易踩的坑——缩放背景图后，background-position的坐标也得跟着按比例调整，不然显示的位置会跑偏。

具体修改步骤： #

1. 添加background-size属性：给你的.my-sprite类加上background-size: 50% 50%（或者直接写50px 50px，因为原尺寸是100x100，一半就是50px），这会把整个精灵图缩放到原大小的50%。
2. 调整容器宽高：把容器的width和height从100px改成50px，这样刚好能容纳缩小后的图标。
3. 修正background-position：你原来的background-position: -200px 0px，因为背景图缩小了一半，这个坐标也要除以2，变成-100px 0px，这样才能准确显示你要的那个图标。

修改后的完整代码： #

CSS

.my-sprite {
  background-image: url("https://i.sstatic.net/lJpW8.png");
  height: 50px;
  width: 50px;
  background-position: -100px 0px;
  background-size: 50%; /* 等同于background-size: 50px 50px */
}

HTML

<div class="my-sprite"></div>

补充说明： #

• 如果你的精灵图是一张包含多个图标的大图，background-size的百分比是相对于原背景图的尺寸来计算的，所以50%就是原尺寸的一半，非常直观。
• 如果你后续需要调整缩放比例，比如缩放到30%，那background-position的数值也要乘以0.3，以此类推，保持坐标和缩放比例匹配就行。

内容的提问来源于stack exchange，提问作者Taylor A. Leach