本文介绍一种可靠方案：用 替代 background-image，结合绝对定位与视口单位（如 %、dvh、vmin），使列表项等子元素能随图片等比缩放并保持在图像内固定位置。

本文介绍一种可靠方案：用 `` 替代 `background-image`，结合绝对定位与视口单位（如 `%`、`dvh`、`vmin`），使列表项等子元素能随图片等比缩放并保持在图像内固定位置。

在构建基于背景图的模态框（如训练选项面板）时，常见痛点是：当使用 background-image + background-size: contain 时，CSS 无法获取图片原始宽高比与渲染尺寸，导致 margin/padding 等相对定位失效——屏幕缩放后，文字或按钮严重偏离图像中的目标区域（如图标框、标注位）。

根本原因在于：background-image 是装饰性内容，不参与文档流，其渲染尺寸不可被子元素直接参照。而 元素天然具有可测量的盒模型、固有宽高比和响应式行为，配合 position: relative 父容器与 position: absolute 子元素，即可实现像素级可控的响应式对齐。

✅ 推荐实现步骤如下：

1. 替换背景图为 标签
   将 .node-modal-content 中的 background-image 移除，改用 作为内容主体，并设为 display: block; max-width: 100%; height: auto; 以维持原始比例。

2. 包裹容器设为 position: relative
   确保 .node-modal-content（或新增 wrapper）具有 position: relative，使其成为绝对定位子元素的定位上下文。

3. 子元素使用 position: absolute + 百分比定位
   列表项（或每个

4. ）不再依赖 margin-top 等静态偏移，而是通过 top/left/width/height 的百分比值（如 top: 28.5%; left: 32%; width: 34%; height: 5.2%;）精确定位到图像内的目标区域。这些百分比基于父容器（即 所在容器）的当前渲染尺寸，随缩放自动适配。

5. 字体与间距使用动态单位
   避免 px，改用 rem、dvh、vmin 或 clamp()：

   .node-modal-list li {
     font-size: clamp(1.1rem, 2.5dvh, 1.8rem); /* 在小屏保可读，大屏不溢出 */
     padding: clamp(8px, 1.2dvh, 14px) clamp(12px, 1.6dvh, 20px);
     height: clamp(40px, 4.5dvh, 56px);
   }

6. 关键 HTML 结构示例

   <div class="node-modal-content" style="position: relative;">
     <img src="/uploads/20261110/17942968386af2cc067a8b3.jpg" alt="Training modal layout"  style="max-width:90%"><ul id="nodeModalList" class="node-modal-list" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0;"><!-- JS 动态生成的 li 将通过 JS 设置 style.top/style.left --></ul>
   </div>

⚠️ 注意事项：

• 百分比定位需基于图像实际渲染尺寸，建议先在设计稿中标注目标区域相对于整图左上角的 x% 和 y%（可用 Figma / Photoshop 测量）；
• 若图像宽高比变化（如横竖屏切换），需监听 resize 并重算定位值，或统一使用 background-size: cover + 固定容器宽高比（通过 aspect-ratio 或 padding-top 技巧）；
• 绝对定位的
• 应禁用默认列表样式（list-style: none），并确保 z-index 高于图像；
• 对于多语言/动态文本长度，建议限制 max-width 与 text-overflow: ellipsis，避免错位。

总结：放弃 background-image 的“视觉捷径”，拥抱 + position: absolute 的语义化、可测量、可响应式方案，是解决背景图内元素对齐问题最稳定、可维护性最强的方式。