能否利用背景图的x、y偏移量将其缩放到指定宽高？

你完全可以结合背景偏移量和background-size属性，把这张包含多张小图的雪碧图缩放到不同的宽度和高度，核心是让偏移量和背景缩放比例保持同步。

原理说明 #

雪碧图的原始偏移量是基于原图尺寸计算的，当你需要缩放显示小图时，不仅要调整背景图的整体大小，还要按相同比例调整偏移坐标，这样才能精准定位到目标小图，避免显示错位。

结合你的示例修改后的代码 #

假设你示例里的原小图尺寸是48px×48px（从-48px的偏移量推断），我们可以适配不同尺寸的容器：

CSS 代码

.container { width: 960px; }

/* 展示完整雪碧图，不缩放 */
.full { 
  background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') no-repeat; 
  width: 100%; 
  height: 200px; 
}

/* 40px×40px 容器：缩小显示小图 */
.img-container-40 { width: 40px; height: 40px; margin: 10px 0; }
.shrinked-40 { 
  background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') -40px -40px no-repeat; 
  width: 100%;
  height: 100%;
  /* 原小图48px → 目标40px，缩放比例为 48/40，让背景图放大到对应比例，刚好填满容器 */
  background-size: calc(100% * (48/40)); 
}

/* 60px×60px 容器：放大显示小图 */
.img-container-60 { width: 60px; height: 60px; margin: 10px 0; }
.shrinked-60 { 
  background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') -60px -60px no-repeat; 
  width: 100%;
  height: 100%;
  /* 原小图48px → 目标60px，缩放比例为 48/60 */
  background-size: calc(100% * (48/60)); 
}

HTML 代码

<div class="container">
  full image
  <div class="full"></div>
  
  40px centered (shrinked)
  <div class="img-container-40">
    <div class="shrinked-40"></div>
  </div>
  
  60px centered (enlarged)
  <div class="img-container-60">
    <div class="shrinked-60"></div>
  </div>
</div>

更灵活的百分比方案 #

如果你不想依赖具体的像素尺寸，还可以用百分比来定义偏移和背景大小，比如假设雪碧图是10×10排列的小图：

.shrinked-flex {
  background: url('your-sprite-url') no-repeat;
  /* 目标小图在第2行第2个，对应百分比偏移 -10% -10% */
  background-position: -10% -10%;
  /* 整个雪碧图放大10倍，让每个小图占10%的宽高 */
  background-size: 1000%;
  width: 50px;
  height: 50px;
}

这种方式不需要知道原图的具体像素，只要清楚小图在雪碧图中的相对位置比例，就能轻松适配任意容器尺寸。

关键步骤总结 #

1. 确认原雪碧图中目标小图的尺寸和初始偏移量
2. 根据容器的目标宽高，计算缩放比例（目标尺寸 ÷ 原小图尺寸）
3. 设置background-size为原图的「原小图尺寸 ÷ 目标尺寸」倍（或对应百分比）
4. 按相同比例调整background-position的偏移量（或用百分比偏移）

内容的提问来源于stack exchange，提问作者Asaf Aviv