页面级图片水印首选CSS background-image，因其不干扰布局、兼容性好；须用预设透明度的PNG、repeat平铺、固定background-size，避免opacity和fixed等错误用法。
直接用 background-image 设置图片水印最稳妥
页面级图片水印，首选 CSS 的 background-image，不是伪元素、不是 canvas、更不是往 body 里塞 <img alt="HTML怎么设置图片作为页面的水印背景" >。原因很简单：它不参与文档流、不干扰布局、不阻塞渲染、兼容性覆盖 IE9+，而且一次写对就能稳定生效。
关键不是“能不能”，而是“怎么设才不翻车”。常见错误是把透明度写在容器上：body { opacity: 0.2 }——这会让整个页面（包括文字、按钮、输入框）都变淡，用户根本没法用。
- 水印图片必须是带 Alpha 通道的 PNG，透明度应在图像编辑工具里预设为 10%–20%，而不是靠 CSS 的
opacity调节 -
background-repeat: repeat才能铺满全页；若设为no-repeat，只显示一个水印，通常达不到“背景感” -
background-size建议用固定值（如180px 120px），避免用cover或contain——它们会拉伸变形，水印文字可能糊掉或错位 - 不要给
body加background-attachment: fixed，滚动时水印会“粘”在视口不动，和内容脱节，视觉上像 bug
为什么不用伪元素（::before）做页面级水印
伪元素适合给某个 <div> 加水印，但用于整页时隐患明显：它本质是插入一个新层，z-index 再低也仍属于 DOM，容易被用户用 DevTools 直接 <code>display: none 干掉；更麻烦的是，如果页面有 transform、filter 或 will-change 的元素，伪元素可能意外被裁剪或失真。
另外，伪元素要生效，父容器必须有 position: relative ——你总不能给 body 加这个，否则所有绝对定位子元素的参考系都会变，引发连锁布局问题。
立即学习“前端免费学习笔记（深入）”；
- 伪元素水印只推荐用于局部容器（如报表卡片、PDF 预览区）
- 若坚持用，务必加
pointer-events: none，否则水印层会拦截鼠标事件，导致按钮点不中、输入框无法聚焦 - 别依赖
content: ""+background-image组合——某些旧版 Safari 对伪元素背景图支持不稳定
background-position 和平铺密度的实际影响
水印不是越密越好，也不是越居中越好。太密（比如 background-size: 60px）会让页面像网格纸，干扰阅读；太疏（background-size: 300px）又显得敷衍，起不到标识作用。
真正影响观感的是「视觉节奏」：建议按视口宽度动态控制平铺密度，但不用 JS。纯 CSS 就能实现：
body {
background-image: url('watermark.png');
background-repeat: repeat;
background-size: 160px 110px;
}
@media (min-width: 768px) {
body { background-size: 180px 120px; }
}
@media (min-width: 1200px) {
body { background-size: 200px 140px; }
}- 小屏设备用稍小的尺寸，避免水印文字挤在一起看不清
- 大屏下放大一点，防止水印颗粒感过重
- 别用
background-position: center center配合repeat——它只影响第一个图块的位置，后续仍按左上角起点平铺，实际效果和top left几乎一样
Canvas 动态水印只在必要时启用
如果你的水印必须含动态内容（比如当前登录用户名、实时时间戳、IP 地址哈希），那 CSS 图片方案就失效了——它无法拼接变量。这时才轮到 canvas 出场。
但注意：canvas 水印不是“更高级”，而是“更重、更易出错”。生成失败会导致背景空白；缩放/旋转没处理好，文字会偏移出屏；导出的 data URL 过长，可能触发某些浏览器的样式解析限制。
- canvas 宽高至少设为
2 * window.innerWidth×2 * window.innerHeight，否则平铺后水印边缘断裂 - 绘制前必须先
ctx.translate()把原点移到画布中心，再ctx.rotate(-Math.PI / 4)，否则文字会绕左上角旋转飞走 - 用
ctx.fillText()，别用ctx.strokeText()——后者描边在高 DPI 屏上发虚，打印出来几乎看不见 - 生成的 data URL 别硬写进 CSS 文件，必须用 JS 动态赋给
document.body.style.backgroundImage
真正难的不是画出来，而是让水印在各种缩放比例、深色模式、打印预览下都保持可读又不抢戏——这点连很多成熟框架都没完全解决，得靠反复实测。
