如何通过print媒体查询优化CSS，实现打印时的色彩表现？

本文共计864个文字，预计阅读时间需要4分钟。

浏览器默认在打印时会降低色彩，Chrome 和 Edge 会强制启用 `color-adjust: economy`（旧名为 `-webkit-print-color-adjust`）。这会导致你设置的 `color` 属性失效。

必须显式覆盖这个行为才能保留颜色：

• 对需要彩色输出的元素，加 color-adjust: exact（标准属性）
• 兼容老版本 Chrome/Edge，补上 -webkit-print-color-adjust: exact
• 注意：该属性只在 @media print 内生效，写在常规样式里无效

/* 正确写法 */ @media print { .invoice-header { color: #2c3e50; background-color: #3498db; color-adjust: exact; -webkit-print-color-adjust: exact; } }

为什么 background-color 打印不出来？

绝大多数浏览器默认禁用背景图和背景色打印——不是 bug，是用户可调的隐私/省墨设置，但你的 CSS 不能依赖用户手动勾选“打印背景图形”。

解决思路不是劝用户改设置，而是提前适配：

立即学习“前端免费学习笔记（深入）”；

• background-color 必须配合 color-adjust: exact 才可能生效（见上条）
• 渐变、图片类 background-image 几乎无法可靠打印，建议替换为纯色 + 边框或伪元素描边
• 如果必须用背景图，考虑导出为 PDF 时用 @page + background-image，但仅限支持该特性的引擎（如 Puppeteer）

print 媒体查询里该重置哪些颜色相关属性？

别只盯着 color 和 background。打印上下文里，很多平时不显眼的颜色逻辑会暴露问题：

• border-color 默认可能被忽略，建议统一设为 solid #000 或明确值
• outline、box-shadow、text-shadow 在打印时一律不渲染，删掉或用边框替代
• opacity 会导致内容变淡甚至消失，打印样式中应避免使用
• 链接的 :visited 颜色会被重置为黑色，若需区分，改用文字标注（如 [PDF]）而非颜色

Chrome 打印预览里颜色正常，但实际打印机输出还是灰的

这是最典型的“假成功”：Chrome 预览只是渲染快照，不代表驱动层真实输出。真正决定是否上色的是操作系统打印驱动和打印机固件。

能做的只有两件事：

• 确认打印机驱动设置中，“颜色模式”未被锁定为“灰度”或“黑白”（尤其企业级 HP / Canon 驱动常默认关闭彩色）
• 在 CSS 中对关键信息做双重保障：比如重要状态用 color: red + border-left: 4px solid red + 文字前加 [警告]
• 测试时务必用“另存为 PDF”再打开查看，比直接连打印机更可控

颜色在打印链路里经过 CSS → 浏览器渲染 → PDF 生成 → 打印驱动 → 硬件解析，任何一环都可能丢色。最稳的做法，从来不是死磕 color-adjust，而是让信息不依赖颜色也能被识别。