HTML/CSS简历打印问题求助：背景不显示、排版错位及截图打印偏移

我来帮你逐个拆解这些打印时的坑，都是前端简历打印常见的问题，亲测有效：

1. 打印时背景颜色不显示 #

浏览器默认会禁用背景图形来节省墨水，你需要在CSS里强制开启打印背景渲染，给全局或者需要背景的元素加上：

:root {
  --font-color: #FFF;
  --section-bg: #424242;
  --info-head: #00B8D4;
  --border-color: #00B8D4;
  --progress-bar: #00B8D4;
  /* 新增打印背景强制渲染属性 */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* 也可以给需要背景的区块单独设置，确保生效 */
.section {
  background-color: var(--section-bg);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

另外别忘了检查浏览器打印设置（快捷键Ctrl+P），找到「更多设置」里的背景图形选项并勾选——这是浏览器层面的开关，CSS只是辅助强制生效。

2. 打印时元素排版错位 #

打印的渲染逻辑和浏览器屏幕渲染差异很大，浮动、flex布局很容易在分页时乱掉，建议专门写打印媒体查询来适配：

@media print {
  /* 重置页面边距，避免默认留白导致布局偏移 */
  body {
    margin: 0;
    padding: 0;
    width: 21cm; /* 匹配A4纸宽度，也可以用英寸单位：8.27in */
    height: 29.7cm;
  }
  /* 禁止简历区块被分页截断，避免内容拆分到两页 */
  .section, .resume-item {
    page-break-inside: avoid;
  }
  /* 去掉屏幕端冗余样式，比如阴影、hover效果，减少打印干扰 */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* 如果用了flex布局，强制打印时保持原有排列逻辑 */
  .flex-container {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}

如果简历里有固定定位的元素，打印时要改成position: static，不然会在每一页重复出现或者错位。

3. 截图打印时两端留白 #

截图转JPEG后打印，浏览器会按图片原始比例缩放，默认不会填充整个页面。有两个简单的解决办法：

• 调整打印设置：打开打印预览后，在「缩放」选项里选择填充页面（不同浏览器叫法可能不同，比如Chrome在「适应」里选「填充」），图片会自动拉伸/裁剪到填满A4纸。
• 嵌入HTML后打印：把截图放到全屏容器里，用CSS强制占满页面，再打印这个页面：

<div style="width: 100vw; height: 100vh; overflow: hidden;">
  <img src="你的简历截图.jpg" style="width: 100%; height: 100%; object-fit: cover;">
</div>

打印时再选择「无边距」模式，就能完美填满页面了。

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