17370845950

打印时CSS颜色丢失是因浏览器默认禁用背景色和颜色打印，需在@media print中显式设置color、background-color，并添加-print-color-adjust: exact;声明，同时提示用户勾选“背景图形”选项。

打印时CSS颜色丢失，通常是因为浏览器默认启用“仅打印文本”或“节省墨水”模式，导致背景色、文字颜色等被忽略。解决方法是为 @media print 媒体类型显式定义所需颜色，并禁用浏览器的自动简化行为。

确保 print 媒体查询中显式设置颜色

浏览器在打印时会忽略未在 @media print 中重申的样式。即使屏幕样式已设颜色，也必须在 print 块里重新声明：

• 文字颜色用 color（如 color: #2c3e50;），不能依赖继承
• 背景色需主动开启（默认被禁用），用 background-color 并配合 -webkit-print-color-adjust: exact; 和 print-color-adjust: exact;
• 避免使用 transparent 或 rgba(..., 0) 等隐式无色值

强制启用彩色打印支持

部分浏览器（尤其是 Chrome 和 Safari）默认关闭背景图形打印。需在相关元素上添加：

• -webkit-print-color-adjust: exact;
• print-color-adjust: exact;
• 这两条声明需写在 @media print 内部，且作用于具体元素（如 .header、.card），不能只写在 body 上

避开系统级“灰度打印”干扰

操作系统或打印机驱动可能覆盖网页设置。可从两方面应对：

• 在 CSS 中避免依赖浅灰、低对比色（如 #eee），改用深灰或黑字提升可读性
• 提示用户：打印前在浏览器打印预览中手动勾选「背景图形」或「颜色」选项（Chrome 地址栏右侧「更多设置」里）
• 必要时用 @media print { * { -webkit-print-color-adjust: exact !important; } } 全局兜底（慎用，影响性能）

测试与调试技巧

真实验证比预览更可靠：

• 用 Ctrl+P（Win）或 Cmd+P（Mac）打开打印预览，切换「目标打印机」为「另存为 PDF」，查看生成效果
• 禁用浏览器扩展（尤其广告拦截类），某些插件会注入样式干扰 print 媒体
• 在 @media print 中临时加一条 border: 2px solid red; 测试规则是否生效