如何设置div打印时与纸张上下边缘留空且背景图全屏打印

核心方案：分离背景全屏与内容区域边距控制 #

直接给容器设置margin无法实现多页内容的每页边距一致，且会和背景全屏的需求冲突。我们需要通过CSS打印媒体查询结合绝对定位来分别处理背景和内容：

实现代码 #

HTML结构

<body>
  <div class="content-container">
    <!-- 你的长文本内容，比如段落、子div等 -->
    <p>这里是跨多页的长文本内容...</p>
    <!-- 更多内容 -->
  </div>
</body>

CSS样式

/* 全局样式：设置背景图 */
body {
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 打印专属样式 */
@media print {
  /* 重置页面边距，让背景铺满整张纸 */
  @page {
    size: A4; /* 可根据需求修改纸张尺寸，如letter */
    margin: 0;
  }

  /* 重置html/body边距，确保背景无留白 */
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* 强制浏览器打印背景图/颜色 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 内容容器：锁定每页内容的上下范围 */
  .content-container {
    position: absolute;
    top: 50mm;    /* 距离纸张顶部50mm */
    bottom: 20mm; /* 距离纸张底部20mm */
    left: 0;
    right: 0;
    padding: 0 15mm; /* 可选：添加左右边距，按需调整 */
    overflow: visible; /* 允许内容自然跨页 */
  }

  /* 可选优化：避免内容在段落/块级元素中间断开 */
  p, .content-container > div {
    page-break-inside: avoid;
  }
}

关键说明 #

1. 背景全屏实现：通过@page { margin: 0 }清除纸张默认边距，同时给html/body重置边距，配合print-color-adjust强制打印背景图，确保背景铺满整张纸。
2. 内容边距控制：使用绝对定位的容器，通过top和bottom属性直接限定内容在纸张中的垂直范围，无论内容分多少页，每页的内容都会自动从该页的50mm顶部位置开始，到20mm底部位置结束，完美解决了连续容器margin仅第一页生效的问题。
3. 可读性优化：page-break-inside: avoid可以减少内容在段落、卡片等元素中间断开的情况，提升打印文档的可读性。

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