为何opacity与rotate在@page中失效？xhtmlrenderer转PDF水印问题

数据老陈

2026-8-23

解决xhtmlrenderer渲染PDF时水印opacity和rotate不生效的问题

针对xhtmlrenderer（Flying Saucer）对CSS3属性在running元素上支持有限的问题，可通过以下几种方案解决：

方案1：用RGBA颜色替代opacity

xhtmlrenderer对opacity属性在position: running()元素上支持不佳，但支持RGBA颜色值，可直接通过颜色透明度实现水印效果：

div.watermarked {
  position: running(watermarked);
  text-align: center;
  font-size: 200px;
  /* 用rgba替代opacity，最后一位是透明度 */
  color: rgba(0, 0, 0, 0.1);
  z-index: -99;
  top: 50%;
  left: 25%;
}

方案2：改用SVG实现旋转水印

xhtmlrenderer对SVG的变换支持更完善，将水印文本嵌入SVG中，可直接实现旋转和透明效果：

替换原div为SVG元素：

<body>
  <svg class="watermarked" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <text 
      x="50%" 
      y="50%" 
      text-anchor="middle" 
      fill="rgba(0,0,0,0.1)" 
      font-size="200px" 
      transform="rotate(-30 50% 50%)"
    >Preview</text>
  </svg>
</body>

调整CSS：

@page {
  margin: 3cm 1cm 3cm 1cm;
  size: A4 portrait;
  @left-middle{
    content: element(watermarked)
  }
}
svg.watermarked {
  position: running(watermarked);
  width: 100%;
  height: 100%;
}

方案3：放弃running元素，使用全局固定定位

如果上述方案仍不生效，可直接在body中添加固定定位的水印，确保其覆盖所有页面：

div.watermarked {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 200px;
  color: rgba(0, 0, 0, 0.1);
  z-index: -99;
  pointer-events: none; /* 避免水印遮挡交互 */
}

这种方式无需依赖@page的running元素，兼容性更好，但需确保body高度足够覆盖所有分页内容。