Print CSS：如何仅在PDF第一页以固定坐标打印Logo？

我有一份内容可变的XHTML文档，通过openhtmltopdf渲染为PDF（可能是单页或多页），需要仅在第一页距顶部20mm、右侧20mm的精确位置显示Logo。现有两种尝试方法存在问题，以下是可行的解决思路：

现有方法的问题 #

• 方法1：用position: fixed会导致Logo在每一页重复显示：

.logo { 
  width: 100mm; 
  position: fixed; 
  right: 20mm; 
  top: 20mm; 
}

• 方法2：尝试@page :first的页边距盒子，但无法精准控制Logo坐标：

@page :first { 
  @top-right { 
    background-image: url("logo.png"); 
    background-repeat: no-repeat;  
    background-size: contain; 
  }
}

可行解决方案 #

方案1：绝对定位+第一页专属容器 #

通过给第一页内容单独加容器，用绝对定位固定Logo位置，同时强制分页隔离后续页面：

1. XHTML结构：

<!-- 第一页专属容器，强制后续内容分页 -->
<div class="first-page-wrap">
  <img src="logo.png" class="logo" />
  <!-- 第一页的其他内容 -->
</div>

<!-- 后续页面的内容 -->
<div class="rest-pages">
  <!-- 这里放除第一页外的所有内容 -->
</div>

2. CSS样式：

/* 让第一页容器占满一页，强制之后的内容分页 */
.first-page-wrap {
  position: relative;
  min-height: 297mm; /* A4纸高度，按需调整 */
  page-break-after: always;
}

/* 精确控制Logo的位置 */
.logo {
  width: 100mm;
  position: absolute;
  right: 20mm;
  top: 20mm;
}

/* 后续页面正常排版即可 */
.rest-pages {
  /* 按需设置样式，比如页边距 */
  margin: 15mm;
}

这种方式逻辑简单，兼容性好，完全能保证Logo只在第一页的指定位置显示。

方案2：微调页边距盒子实现精准定位 #

如果想用@page :first的方式，可以通过调整盒子的边距和尺寸来校准位置：

/* 先设置全局页面边距为0，避免干扰 */
@page {
  margin: 0;
}

@page :first {
  @top-right {
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-size: 100mm auto; /* 固定Logo宽度，高度自适应 */
    /* 精确设置偏移量，对应距顶20mm、右20mm */
    margin-top: 20mm;
    margin-right: 20mm;
    /* 设置盒子尺寸匹配Logo，避免背景图被裁剪 */
    width: 100mm;
    height: auto; /* 替换为Logo实际高度可更精准 */
    padding: 0;
    content: ""; /* 必须设置content才能显示背景图 */
  }
}

注意：需要根据你的Logo实际高度调整height值，确保背景图完整显示。

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