如何用JavaScript或CSS实现发票打印页面每页重复显示水印？

嘿，我完全懂你遇到的麻烦——要给发票页面加能在每一张打印页都显示的水印，而且没法提前知道最终会有多少页，之前尝试用JS处理重复div没成功对吧？别慌，咱们用CSS就能完美搞定这个需求，根本不用依赖JS去猜页面数量~

核心思路：利用CSS打印专属规则+固定定位 #

Chrome的打印引擎对CSS的@page和fixed定位支持很好，这俩组合起来就能让水印自动出现在所有打印页上，不管页面怎么自动分页。

方案1：文字水印（纯CSS，无需图片） #

直接用伪元素生成文字水印，通过fixed定位让它在每个打印视口都渲染：

/* 仅在打印时生效的样式 */
@media print {
  /* 先设置打印页边距，避免水印被裁切 */
  @page {
    margin: 2cm;
  }

  /* 生成文字水印 */
  body::after {
    content: "发票专用水印"; /* 替换成你的水印文字 */
    position: fixed; /* 关键！fixed定位在打印时会每页重复显示 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg); /* 居中+倾斜，增强水印感 */
    font-size: 50px;
    color: rgba(0, 0, 0, 0.1); /* 低透明度，不干扰内容 */
    z-index: -1; /* 让水印在内容下方 */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* 不影响页面内容的交互（如果有的话） */
  }
}

方案2：图片水印 #

如果是用图片做水印，用background-attachment: fixed让背景在每个打印页重复：

@media print {
  @page {
    margin: 2cm;
  }

  body {
    background-image: url('你的水印图片路径');
    background-repeat: repeat; /* 重复铺满页面 */
    background-position: center;
    background-size: 300px 300px; /* 调整水印大小 */
    background-attachment: fixed; /* 固定背景，实现每页显示 */
  }
}

为啥之前用JS处理重复div没成功？ #

大概率是因为JS是在页面加载时生成了固定数量的div，但Chrome打印时会根据内容自动分页，这些提前生成的div没法覆盖到自动拆分出来的新页面。而CSS的fixed定位/固定背景是跟着每个打印视口走的，不管页面怎么分页，都会自动在新页面渲染水印。

测试小技巧 #

直接用Chrome的打印预览（Ctrl+P）就能实时看到效果，调整水印的大小、透明度、位置直到满意为止~

内容的提问来源于stack exchange，提问作者zetawars