如何通过CSS为markdown-pdf生成的PDF设置全屏背景？

我明白你现在卡在哪了——用CSS设置PDF全屏背景总是达不到预期效果，其实这主要和markdown-pdf底层依赖的PhantomJS渲染引擎对打印样式的处理逻辑有关，咱们一步步调整就能解决：

问题根源 #

你原来的代码里，@page的background属性在PhantomJS的打印流程里支持并不完善，而且html/body的样式虽然设置了100%宽高，但打印场景下的页面边距、尺寸适配还没完全覆盖到，导致背景没法撑满整个页面。

修改后的CSS方案 #

把你的CSS改成下面这样，重点强化body的背景覆盖，同时优化@page的配置：

@media print {
  @page {
    size: A4; /* 明确页面尺寸，也可以用letter等自定义尺寸 */
    margin: 0; /* 彻底清除页面默认边距 */
    -webkit-print-color-adjust: exact !important; /* 强制打印时保留颜色 */
  }

  html, body {
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm; /* 和A4宽度完全匹配，letter尺寸用216mm */
    height: 297mm; /* 和A4高度完全匹配 */
    background-color: #20333e !important;
    color: rgba(255, 255, 255, 0.87);
    -webkit-print-color-adjust: exact !important;
    position: relative;
    overflow: hidden;
  }

  /* 给markdown生成的内容容器加内边距，避免内容贴边 */
  .markdown-body {
    margin: 0 !important;
    padding: 2rem;
    height: 100%;
    box-sizing: border-box;
  }
}

额外的markdown-pdf配置优化 #

如果上面的CSS还没完全生效，你可以在markdown-pdf的配置里加上PhantomJS的自定义参数，强制它忽略默认的打印限制：

import * as markdownpdf from 'markdown-pdf';

markdownpdf({
  cssPath: './path/to/my/ebook.css',
  phantomArgs: ['--web-security=no', '--ignore-ssl-errors=yes', '--print-media-type']
}).from.string('# CSS Not Full Background').to("./document.pdf", function () {
  console.log("done");
});

关键调整说明 #

• 放弃@page的背景设置，改用body的背景色，因为PhantomJS对@page背景的支持非常有限；
• 手动设置html/body的宽高和目标页面尺寸完全匹配，避免100%宽高在打印场景下的适配偏差；
• 重复添加-webkit-print-color-adjust: exact，确保打印引擎不会淡化背景色；
• 给markdown内容容器加内边距，保证内容不会完全贴在页面边缘，提升可读性。

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