水印常见问题及解决方案：透明度需用rgba控制在0.05–0.15；伪元素须设fixed定位覆盖全视口；优先用SVG背景替代transform旋转防模糊；打印时改用static定位和HTML内嵌确保可见；需多端多模式反复验证。
水印文字不显示或显示为实色块
常见原因是 color 或 background-color 被设成不透明黑/白，盖住了底层内容。伪元素默认是不透明的，必须显式控制透明度。
- 用
color: rgba(0, 0, 0, 0.08)替代color: #000，透明度建议在0.05–0.15之间，太低看不见，太高干扰阅读 - 避免对伪元素设置
background-color，它会遮挡页面内容；水印应靠文字本身半透叠加实现 - 如果用了
background-image生成文字（如 base64 SVG），也要确保 SVG 内部 fill 是rgba()，而非纯色
水印无法平铺覆盖整个页面背景
伪元素默认尺寸为 0×0，content: "" 不触发渲染，必须手动撑开并定位。
- 给伪元素加
position: fixed+top: 0; left: 0; width: 100vw; height: 100vh，确保覆盖视口全区域 - 用
background-image: linear-gradient(...), linear-gradient(...)多层渐变模拟重复文字，比background-repeat: repeat更可控 - 若用
::before挂在某个容器上（如body::before），需确认该容器有高度且未被overflow: hidden截断
旋转水印文字模糊或错位
CSS transform: rotate() 在非整数角度或高DPI屏下容易发虚，尤其文字边缘。
- 优先用
background-image内嵌 SVG，SVG 中用text元素 +transform="rotate(-30)"，渲染更锐利 - 若坚持用伪元素文字，加
-webkit-font-smoothing: antialiased和backface-visibility: hidden减少模糊 - 旋转中心点默认是元素中心，若文字偏移，需配合
transform-origin: center显式声明，否则平铺后接缝错乱
打印时水印消失或错位
浏览器打印预览通常禁用 fixed 定位和部分 background-image，水印极易丢失。
立即学习“前端免费学习笔记（深入）”；
- 打印样式中改用
@media print { body::before { position: static; display: block; } }，放弃 fixed - 把水印文字写进 HTML（如一个隐藏
<div class="watermark-print">），再用打印样式控制显示，比纯 CSS 更可靠 <li>避免依赖 <code>vw/vh单位，打印时它们行为不一致；改用%或固定px值，并测试 A4 纸实际尺寸（约210mm × 297mm）
真正难的是让水印在各种缩放、滚动、打印、深色模式下都“存在但不打扰”——它不是加了就完事，而是要反复在 Chrome/Firefox/Safari 的开发者工具里切到不同设备模拟器和打印预览里看三遍。
