<p>水印位置用 CSS background-position 控制最直接，核心是 background-position 决定水印图案在容器中的落点，常见值如 top left、center、bottom right；避免用绝对定位覆盖，推荐 data- 属性 + JS 动态切换，并注意 IE 兼容性及调试要点。</p>
水印位置用 CSS background-position 控制最直接
HTML 本身没有“水印位置选择器”这种内置控件，所有位置控制都落在 CSS 上。核心就是 background-position —— 它决定水印图案（通常是 base64 图片或 SVG）在容器里的落点。
常见错误是试图用 top/left 配合 position: absolute 去盖一层 div，结果导致水印不随内容滚动、打印时消失、或被其他 z-index 干扰。而背景方式天然贴合文档流，打印友好，也更容易响应式适配。
-
background-position: top left→ 左上角 -
background-position: center center→ 居中（等价于center） -
background-position: bottom right→ 右下角 - 想右上？写
top right；想左下？写bottom left
用 data- 属性 + JS 动态切换位置更灵活
如果页面需要让用户点选“左上/居中/右下”，别硬写三套 class，用一个通用类 + data-watermark-pos 控制更干净。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
div[data-watermark-pos="top-left"] {
background-position: top left;
}
div[data-watermark-pos="center"] {
background-position: center;
}
div[data-watermark-pos="bottom-right"] {
background-position: bottom right;
}
JS 改位置只要一行：el.setAttribute('data-watermark-pos', 'center')。避免 class 切换时的竞态或残留。
- 注意：IE10+ 才完全支持
background-position的关键字组合（如top left），老版本需降级为0 0/50% 50%/100% 100% - 如果水印是半透明文字（非图片），用
::before伪元素 +transform也能做，但会增加层叠上下文，容易被overflow: hidden截断
水印不显示？先查这三件事
90% 的“水印没出来”问题和位置无关，而是基础配置漏了：
- 忘了设
background-image—— 即使写了background-position，没图照样白搭 - 容器没高度/宽度（比如空 div 或
display: inline元素），背景无处可绘 -
background-repeat: no-repeat没加，默认会平铺，看起来像没生效（其实是铺满了）
调试时临时加个 background-color: rgba(0,0,0,0.1)，能立刻确认容器是否渲染、尺寸是否符合预期。
移动端适配水印位置要防缩放偏移
用 px 或百分比设 background-position 在缩放或横屏时容易错位。稳妥做法是：
- 统一用关键字（
top left,center）—— 它们基于盒模型边缘计算，不受缩放影响 - 避免混合使用单位，比如
background-position: 20px 30%，不同设备渲染不一致 - 如果必须精调偏移（比如居中但往下挪 10px），用
calc()：background-position: center calc(50% + 10px)
真正在意细节的场景（比如 PDF 导出预览），得单独测试 iOS Safari 和 Chrome for Android 的背景渲染差异——它们对 background-size 和 background-position 的解析仍有细微出入。
