background-position 设为像素值（如20px 10px）最可控；百分比值（如50% 50%）相对于容器宽高；关键词如center top语义清晰但需注意x/y轴对应；配合background-origin、background-size及伪元素等综合控制才能精准对齐。
background-position 怎么设才不偏移
背景图对齐问题，八成出在 background-position 默认值和元素盒模型理解偏差上。浏览器默认是 0% 0%（左上角），但人眼常以为“居中”是理所当然——结果一加文字或 padding 就错位。
- 用像素值（如
background-position: 20px 10px）最可控，适合固定尺寸容器 - 百分比值（如
50% 50%）是相对于容器宽高，不是图片本身；图片超出部分会被裁剪 - 关键词组合（如
center top）语义清晰，但注意top对应 y 轴，left对应 x 轴，别写反 - 如果内容区有
padding或border，记得确认background-origin是padding-box（默认）还是content-box，否则定位基准会跑偏
background-size: cover 和 contain 的实际表现差异
cover 和 contain 看似只是“填满”和“完整显示”的区别，但它们直接影响对齐稳定性——尤其当容器宽高比与图片不一致时。
-
background-size: cover强制填满容器，可能裁剪图片边缘；此时background-position决定哪部分被保留（比如center保中间，right bottom保右下角） -
background-size: contain保证整图可见，但会在容器内留白；对齐看起来“准”，实则空白区域让视觉重心漂移 - 响应式场景下，
cover更常用，但必须配合明确的background-position，否则窗口缩放时图片“滑动”
为什么加了 background-attachment: fixed 后对齐全乱了
background-attachment: fixed 让背景图相对于视口固定，而不是元素本身——这直接废掉了你在容器上设置的所有 background-position 基准。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 一旦启用
fixed，background-position的参考系变成整个 viewport，不再是父容器边界 - 常见陷阱：给一个带滚动的
div设fixed，结果背景图卡在屏幕顶部不动，内容一滚就完全错开 - 替代方案：不用
fixed，改用伪元素 +position: fixed单独控制背景层，内容层正常流式布局 - 移动端慎用：
fixed在 iOS Safari 上有兼容性问题，且可能触发非预期的重绘
用 background-image 配合 content 时，怎么避免文字压在暗区看不清
背景图对齐只是第一步，文字可读性才是落地关键。纯靠调 background-position 往往治标不治本。
- 优先在图上预留“安全区”：设计阶段就留出文字区域（如底部 20% 高度为纯色或渐变蒙版）
- 用
background-blend-mode（如multiply）让浅色文字在深图上自动提亮，但注意 IE 不支持 - 更稳妥的做法：叠加一层半透明
::before伪元素，再把文字放在上层，彻底解耦背景与内容定位逻辑 - 别依赖
text-shadow救急——阴影方向、模糊度稍一变，对齐感就崩了
