CSS实现：不修改background-position缩放背景指定局部区域

核心逻辑是不改动任何background相关属性，通过渲染层缩放实现容器等比缩小，完全保留原有背景定位的显示区域，不会影响各业务场景下预设的background-position配置。

方法1：单容器transform缩放（代码改动最小，兼容性好） #

transform缩放作用于元素渲染完成后的视觉效果，不会重新计算背景定位、盒模型的基础逻辑，因此完全不会改变原有背景显示的局部内容，仅做视觉等比缩放。
原容器尺寸为100px×100px，目标尺寸为50px×50px，缩放比例为0.5，仅需在原有#inner-container-1样式基础上新增代码即可，原有background-position、背景图、基础宽高配置全部保持不变：

#inner-container-1 {
  /* 原有属性全部保留不修改 */
  height: 100px;
  width: 100px;
  position: relative;
  border: 1px solid black;
  background-image: url(https://images.unsplash.com/photo-1583795128727-6ec3642408f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Y2F0c3xlbnwwfHwwfHw%3D&w=1000&q=80);
  background-position: 585px 400px;
  /* 新增以下属性 */
  transform: scale(0.5);
  transform-origin: top left;
  margin-right: -50px;
  margin-bottom: -50px;
}

• 属性说明：
  • transform: scale(0.5)：将元素按0.5倍等比缩小
  • transform-origin: top left：设置缩放基点为左上角，保证布局对齐
  • 负margin：抵消transform缩放后元素原尺寸多占的布局空间，数值为「原边长 - 目标边长」
• 注意：该方案会让容器边框随元素同步缩放，原1px边框缩放后会变为0.5px。如果不需要兼容低版本Firefox，也可以直接给元素加zoom: 0.5实现同等效果，无需额外设置transform和负margin，代码更简洁。

方法2：嵌套分层实现（保持边框宽度不变） #

如果需要容器缩放后边框仍保持1px粗细，可以将边框和背景拆分为两层元素：外层控制最终尺寸、边框和裁剪，内层完全保留原有尺寸和背景配置，仅对内层做缩放，不需要修改任何background-position值。
首先调整HTML结构：

<span id="outer-container">
  <span id="inner-container-1">
    <span class="bg-layer"></span>
  </span>
  <span id="inner-container-2"></span>
</span>

对应CSS配置如下：

#outer-container {
  width: 300px;
  height: 300px;
  position: static;
  display: flex;
}

#inner-container-1 {
  /* 外层直接设置为目标尺寸，放边框 */
  height: 50px;
  width: 50px;
  position: relative;
  border: 1px solid black;
  overflow: hidden; /* 裁剪超出容器的背景部分 */
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  /* 内层完全保留原容器尺寸和背景配置，不改动任何background属性 */
  width: 100px;
  height: 100px;
  background-image: url(https://images.unsplash.com/photo-1583795128727-6ec3642408f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Y2F0c3xlbnwwfHwwfHw%3D&w=1000&q=80);
  background-position: 585px 400px;
  /* 对内层做等比缩放 */
  transform: scale(0.5);
  transform-origin: top left;
}

#inner-container-2 {
  background-color: yellow;
  height: 50px;
  width: 50px;
  border: 1px solid black;
}

两种方案均不需要修改预设的background-position坐标，也不需要更换图片，适配所有业务场景下的预定义坐标，不会出现其他场景的显示偏移问题。

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