如何保留每页边距同时将打印页面白色边框填充为深色？

我正在创建一个可打印的HTML页面，打印时页面背景为深色，但周围存在大片白色边框。我的目标是将所有白色区域填充为深色，同时保留每页的边距。我已尝试两种方法：

• 移除打印时的页面边距：颜色问题得以解决，但丢失了边距
• 设置常规HTML边距：每页的边距消失

打印效果如下：

解决方案 #

通过CSS打印媒体查询结合嵌套容器的方式，可以同时实现深色背景填充和保留页面边距：

1. 调整HTML结构 #

给页面内容嵌套两层容器，外层负责覆盖整个打印区域的背景，内层控制内容边距：

<div class="print-background">
  <div class="print-content">
    <!-- 这里放入你的页面内容 -->
  </div>
</div>

2. 添加打印专用CSS #

@media print {
  /* 重置默认打印样式，确保无内外边距 */
  html, body {
    margin: 0;
    padding: 0;
    background-color: #1a1a1a; /* 替换为你需要的深色 */
    width: 100%;
    height: 100%;
  }

  /* 外层容器：铺满整个打印页面的背景 */
  .print-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1a1a1a; /* 和html/body背景色保持一致 */
    z-index: -1; /* 确保在内容下方不遮挡文字 */
  }

  /* 内层容器：设置自定义页面边距 */
  .print-content {
    margin: 2cm; /* 根据需求调整边距大小，支持cm、in、px等单位 */
    color: #ffffff; /* 搭配深色背景的浅色文字 */
  }

  /* 强制浏览器打印背景颜色 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

3. 必要的浏览器设置 #

打印前需在浏览器的打印设置中开启「打印背景图形」选项（不同浏览器位置略有差异，通常在更多设置里），否则背景色无法正常打印。

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