打印时颜色变灰或消失是因浏览器默认启用color-adjust: economy且打印机驱动常锁定灰度模式，必须在@media print中对具体元素显式设置color-adjust: exact和-webkit-print-color-adjust: exact才能生效。
打印时颜色变灰或消失，不是 CSS 写错了，而是浏览器和打印机两级默认禁用彩色输出。必须在 @media print 中对具体元素显式启用颜色校准，且不能只靠 color 或 background-color 单独生效。
为什么 color 和 background-color 在打印里不生效
Chrome、Edge 默认启用 color-adjust: economy（旧名 -webkit-print-color-adjust: economy），强制将所有颜色降级为灰度；同时操作系统级打印驱动（尤其 HP、Canon 企业驱动）常默认锁定“灰度模式”。即使你在屏幕样式里写了 color: #e74c3c，只要没在 @media print 块里重申 + 校准，它就等于没写。
-
color属性本身有效，但仅当它出现在@media print内部才被打印引擎读取 -
background-color默认被浏览器忽略，必须配合color-adjust: exact才可能输出 -
background-image、渐变、rgba()几乎全部失效——打印机不支持透明度和图像合成 - 开发者工具里的“打印预览”只是渲染快照，不代表真实驱动输出，不能信
color-adjust: exact 必须写在具体元素上，不能只挂 body
全局写 @media print { body { color-adjust: exact; } } 是无效的：该属性不继承，只对声明它的元素本身起作用。如果你要让发票标题、状态标签、表格行都带色，就得逐个加规则，或者用足够具体的选择器批量覆盖。
- 正确写法：
@media print { .status-danger, .invoice-header, .table-row--urgent { color: #c0392b; background-color: #fdf2f2; color-adjust: exact; -webkit-print-color-adjust: exact; } } - 别用
* { color-adjust: exact !important; }兜底——影响性能，且 Firefox 对通配符支持不稳定 - 如果用 CSS-in-JS（如 styled-components），确认其支持
print媒体类型，否则规则根本不会注入 - Vue/React 组件中动态生成的 class 名，需确保它们能被
@media print规则匹配到，避免 scoped style 阻断
哪些颜色写法在打印中会出问题
不是所有合法 CSS 颜色值都能被打印机理解。透明通道、系统色、变量引用，在打印上下文里极易丢失或转义失败。
立即学习“前端免费学习笔记（深入）”；
- 禁用
rgba(255, 0, 0, 0.8)—— alpha 值会被丢弃，结果可能是浅灰或黑，改用rgb(255, 0, 0)或#ff0000 - 避免
currentColor和inherit—— 打印引擎对继承链解析不可靠，一律写死值 - 不要依赖 CSS 自定义属性（
--primary-color）未展开的写法，构建后需确保已编译为实际色值 -
hsl()和hwb()在部分旧版 Edge / Safari 打印中支持差，优先用十六进制
测试是否真生效，别只看预览
Chrome 打印预览里颜色正常 ≠ 实际打印机输出正常。真正验证得走两步：导出 PDF + 实机打印。
- 用
Ctrl+P→ 目标打印机选「另存为 PDF」→ 检查生成 PDF 是否含色（Acrobat 可查输出意图） - 导出 PDF 后仍灰？说明 CSS 规则没命中，或被更高优先级样式覆盖（检查 computed style 面板中的
color-adjust是否计算为exact） - PDF 有颜色但实机打印还是灰？去打印机驱动设置里关掉「灰度打印」「经济模式」「黑白优先」等选项
- 临时加一条
border: 2px solid #f00 !important;到关键容器，是最快判断@media print是否加载成功的办法
最易被忽略的一点：哪怕你把所有 CSS 都写对了，用户打印机驱动若锁死灰度模式，你的 color-adjust: exact 也无能为力。所以关键信息永远别只靠颜色传达——红字旁加「[错误]」文字，蓝背景旁加「【重要】」图标，才是稳的。
