精灵图作为Div背景居中，实现按钮点击缩放效果的技术问询

这个需求的核心是在按钮点击缩放时，既要让整个按钮（包括背景精灵图）产生缩小效果，又要保证精灵图的对应图标始终居中显示，同时不打乱原有play/pause的切换逻辑。我推荐两种方案，优先用第一种，更简单高效：

方案一：使用 transform: scale()（推荐） #

这种方式是最优解，因为transform是在元素渲染完成后进行的几何变换，不会影响背景图的定位逻辑，而且是GPU加速的，动画更流畅。

只需要在原有样式基础上，给.button:active添加缩放变换即可，默认的transform-origin就是中心，所以精灵图会自动跟着居中缩放：

.button { 
  background: url(sprite.png); 
  background-size: auto 100%; 
  width: 100px; 
  height: 100px; 
  background-position: 0px 50%; 
  /* 可选：添加过渡动画，让缩放更平滑自然 */
  transition: transform 0.1s ease;
}
.play { background-position: 0px; }
.pause { background-position: -100px; }

.button:active {
  /* 缩小到原尺寸的95% */
  transform: scale(0.95);
  /* 明确指定缩放原点为中心，默认就是center，可省略但写出来更清晰 */
  transform-origin: center center;
}

为什么这个方案可行？ #

• transform: scale(0.95)会让整个按钮（包括背景图）从中心均匀缩小，原有精灵图的定位（.play和.pause的background-position）完全不受影响，因为背景图的定位是基于按钮的原始尺寸计算的，transform只是视觉上的缩放。
• 过渡动画可以让缩放效果不突兀，提升用户体验。

方案二：调整 background-size 并重新计算定位（不推荐） #

如果因为特殊限制不能用transform，只能通过修改background-size来实现缩小，那需要重新计算background-position的值，确保精灵图居中：

假设你的精灵图是水平排列，每个图标宽度等于按钮原始宽度（100px），总宽度200px。当按钮点击时，把background-size设为auto 95%，此时背景图高度变为95px，宽度按比例变为190px（每个图标宽度95px）。要让图标在100px宽的按钮中居中，需要调整X轴和Y轴的定位：

.button { 
  background: url(sprite.png); 
  background-size: auto 100%; 
  width: 100px; 
  height: 100px; 
  background-position: 0px 50%; 
  transition: background-size 0.1s ease, background-position 0.1s ease;
}
.play { background-position: 0px; }
.pause { background-position: -100px; }

.button:active {
  background-size: auto 95%;
}
/* 单独调整active状态下的play和pause定位 */
.button:active.play {
  /* X轴：(按钮宽度 - 图标宽度)/2 = (100-95)/2 = 2.5px，背景图左移2.5px实现居中 */
  /* Y轴：(按钮高度 - 背景图高度)/2 = (100-95)/2 = 2.5px */
  background-position: -2.5px 2.5px;
}
.button:active.pause {
  /* pause图标在背景图中的位置是95px，加上居中偏移2.5px，总偏移为-(95+2.5) = -97.5px */
  background-position: -97.5px 2.5px;
}

注意事项 #

• 这种方式需要手动计算定位值，一旦按钮尺寸或精灵图尺寸改变，就要重新计算，维护成本高。
• 相比transform，这种方式的性能稍差，因为修改background-size和background-position会触发重绘重排。

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