打印网页时背景颜色和图片默认不显示，因浏览器禁用背景图形以省墨；需在打印预览中勾选“打印背景颜色和图像”，或通过about:config设print.print_background和print.print_background_images为true，或用css加print-color-adjust: exact声明，或改用border模拟背景。
打印网页时背景颜色和图片全部消失，是因为所有主流浏览器默认禁用背景图形输出以节省墨水，必须手动开启或通过代码强制声明才能让这些视觉元素进入打印流水线。
在打印预览界面中启用背景打印
这是最直接、无需修改任何设置或代码的操作路径，适用于 Safari、Chrome、Edge、Firefox 和 IE 所有版本，且对当前打印任务立即生效。
打开目标网页 → 按 Command + P（Mac） 或 Ctrl + P（Windows/Linux） 调出打印预览窗口 → 在右侧设置区域找到并点击“更多设置”（Safari 需点 PDF → 打开预览 → 显示详细信息；Chrome/Firefox 多数版本直接可见）→ 勾选【打印背景颜色和图像】（Firefox 有时显示为“打印背景(颜色和图像)”；IE/360 显示为“打印背景颜色和图像”）。
注意：该选项默认关闭，不勾选则所有 background-color、CSS 渐变、<img> 作为背景图的元素、阴影等均不会输出，预览中也看不到。
通过浏览器底层配置永久启用
适合高频打印、需长期保留样式还原的用户，一次设置，后续所有打印任务自动包含背景色与图像。
在地址栏输入 about:config 并回车 → 点击“我了解此风险” → 在搜索框中依次输入以下两项并双击修改：
① print.print_background → 设为 true
② print.print_background_images → 设为 true
这两项必须同时为 true，缺一不可；仅设前者会导致背景色恢复但图片仍丢失。修改后无需重启浏览器，新打印任务即生效。
用 CSS 强制声明打印时保留背景
如果你能编辑网页源码（如内部系统、自建页面、CMS后台模板），这是最可靠、可复用的方案——它不依赖用户操作，也不受浏览器开关限制。
方法一：为具体元素添加精确样式
在 <style></style> 标签或 CSS 文件中加入以下规则：
@media print { .invoice-header, .highlight-box, .status-badge { background-color: #e3f2fd !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }
【-webkit-print-color-adjust: exact】和【print-color-adjust: exact】必须同时存在，且必须写在具体渲染背景的元素选择器内；写在 body、div 或通配符 * 上无效，因为该属性不继承。
方法二：改用 border 模拟背景色（零依赖、100%生效）
把原本靠 background-color: #3498db 实现的 1px 分隔线，改为 border-bottom: 1px solid #3498db；表格行高亮优先用 border-left: 4px solid #27ae60。因为 border 属性不受“禁用背景”策略影响，打印时始终可见，且兼容性远高于 background。
切换阅读器模式后再打印
某些网页使用防打印脚本、浮动广告、JS 动态遮罩干扰 Safari 或 Firefox 渲染，阅读器模式会剥离干扰层，只保留纯净正文与内联样式，此时若背景由语义化标签承载（如 <section class="bg-blue"></section>），反而更容易被保留。
第一步：打开网页，确认地址栏左侧出现书本图标；
第二步：点击该图标进入阅读器视图；
第三步：按 Command + P（Mac）或 Ctrl + P（Windows）打印。
