添加background定位与尺寸属性后背景图偏移 元素不跟随移动如何解决

• 你设置的background-size: 40%是相对于父容器宽度计算的，当屏幕缩放导致父容器宽度变化时，背景图的尺寸会跟着等比缩放，自然会出现缩小的问题。
• background-position: 57% 5%的定位逻辑是「背景图自身对应百分比的坐标点，与父容器对应百分比的坐标点对齐」，父容器尺寸变化时，两个百分比对应的实际像素值都会发生偏移，最终导致背景图无法固定在原有位置。
• 额外说明：你写的object-fit: fill仅对img、video这类替换元素生效，对CSS背景图完全不生效，你最初没加background-size时显示正常，只是因为背景图默认按照原始尺寸渲染，和这个属性无关。

方案1：固定背景图尺寸和定位，不随容器缩放变化 #

直接把background-size和background-position改为固定像素值，适配你需要的展示效果即可，示例代码：

position: relative; 
background: url("你的背景图地址"); 
background-repeat:no-repeat;
/* 固定背景图宽度为300px，高度自适应，可按需调整数值 */
background-size: 300px auto;
/* 固定背景图距离容器左侧240px、顶部15px的位置，也可根据需求调整为相对于右侧/底部定位，比如 right 20px top 10px */
background-position: 240px 15px;

方案2：保持容器宽高比固定，适配响应式缩放 #

如果需要背景图随容器等比缩放且不偏移，给父容器添加固定宽高比属性，和背景图的原始宽高比保持一致即可，示例代码：

/* 给背景图所在的父容器添加该属性 */
.your-container {
  aspect-ratio: 9/16; /* 替换为你的背景图实际宽高比 */
  width: 100%; /* 可根据你的布局需求调整容器宽度 */
  position: relative; 
  background: url("你的背景图地址"); 
  background-repeat:no-repeat;
  background-position: 57% 5%; 
  background-size:40%;
}

方案3：背景图固定在视口位置，不受容器和页面滚动影响 #

如果需要背景图完全固定在屏幕的某个位置，不管页面滚动还是容器尺寸变化都不移动，添加background-attachment属性即可：

background-attachment: fixed;

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