打印时颜色变灰是因浏览器默认启用color-adjust: economy，需在@media print中对元素显式设置color-adjust: exact和-webkit-print-color-adjust: exact；background-color需配合该属性才可能生效，而渐变和背景图难以可靠打印，建议用纯色替代。
打印时颜色全变灰？@media print 里没关 color-adjust
浏览器默认在打印时会降级色彩，尤其 Chrome 和 Edge 会强制启用 color-adjust: economy（旧名 -webkit-print-color-adjust），导致你写的 color: #ff6b6b 或 background: linear-gradient(...) 全部失效或转为灰度。
必须显式覆盖这个行为才能保留颜色：
- 对需要彩色输出的元素，加
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，而是让信息不依赖颜色也能被识别。
