如何解决Safari浏览器打印网页时背景颜色和图片丢失的问题

Safari打印时背景颜色和图片消失是因默认禁用背景图形，可通过三步解决：1.打印预览中通过PDF→预览→勾选“打印背景颜色和图像”；2.在CSS中用@media print添加print-color-adjust: exact；3.切换阅读器模式再打印。

打印网页时背景颜色和图片全部消失，是因为 Safari 默认禁用背景图形打印以节省墨水，必须手动开启或通过 CSS 强制声明才能保留视觉元素。

在 Safari 打印设置中启用背景图形

这一步是用户侧最直接有效的操作，适用于所有网页，无需修改代码。

1、打开目标网页后，按下 Command + P 调出打印预览窗口。

2、点击右下角的“PDF”按钮 → 选择“打开预览”，进入 macOS 预览应用的打印界面。

3、在预览窗口左下角点击“显示详细信息”，展开完整选项面板。

4、勾选【打印背景颜色和图像】复选框——此选项默认关闭，不勾选则所有 background-color 和 的背景图、CSS 渐变、阴影等均不会输出。

为网页添加 print 媒体查询强制保留颜色

如果你能编辑网页源码（如内部系统、自建页面），这是更可靠、可复用的方案。仅靠浏览器设置无法保证所有用户都开启背景打印。

方法一：在 CSS 中插入以下规则：

@media print {
  .has-bg {
    background-color: #f0f0f0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

注意：【-webkit-print-color-adjust: exact】和【print-color-adjust: exact】必须同时存在，且需加在具体元素选择器内，写在 body 或 * 上无效。

方法二：替换背景色为边框模拟（适合线条、分隔条等）：

将原本用 background-color: #3498db; 实现的 1px 横线，改为 border-bottom: 1px solid #3498db;。因为 border 属性不受“禁用背景”策略影响，打印时始终可见。

切换阅读器模式后再打印

某些网页使用防打印脚本或复杂布局干扰 Safari 渲染，阅读器模式会剥离干扰层，只保留纯净正文与内联样式，此时背景色若由语义化标签（如