如何解决Safari浏览器在打印网页时背景颜色和图片丢失的问题?
说一个不少Safari用户都踩过的坑:打印网页时背景颜色和图片全不见了。这其实是Safari的默认做法,目的是省墨。想保留那些视觉元素,得手动开个开关,或者用CSS强制声明。随手翻翻原因也简单:Safari默认禁止背景图打印,怕浪费墨水。所以下面三招,任选一个就能解决。在 Safari 打印设置中启
说一个不少Safari用户都踩过的坑:打印网页时背景颜色和图片全不见了。这其实是Safari的默认做法,目的是省墨。想保留那些视觉元素,得手动开个开关,或者用CSS强制声明。

随手翻翻原因也简单:Safari默认禁止背景图打印,怕浪费墨水。所以下面三招,任选一个就能解决。
在 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渲染不畅。这时候阅读器模式就派上用场了——它会剥离广告、弹窗、统计脚本这些干扰层,只留纯净正文和内联样式。如果背景色是用语义化标签(比如
怎么用?很简单:
第一步:打开网页,看地址栏左边有没有书本图标;
第二步:点图标进入阅读器视图;
第三步:按Command + P打印。这时候页面已经清爽多了,背景色能不能显示,就看那个元素还在不在DOM里、有没有被阅读器过滤掉。
Windows 10 是一款微软推出的经典操作系统,拥有硬件兼容性与多任务处理能力。它更偏向把系统状态查看和常用调节动作放在一起,适合需要持续观察和微调设备状态的场景。
极度公式是一款跨平台专业LaTeX公式识别编辑软件,支持OCR公式识别和多平台编辑。和使用说明,避免使用,享受完整功能与稳定支持。做扫描整理、文字提取和表格转换时,它能把识别后的处理步骤接得更顺,资料录入这类场景会省下不少时间。
















