打印时颜色变灰是因浏览器默认启用color-adjust: economy，需在@media print中同时声明color-adjust: exact、print-color-adjust: exact和-webkit-print-color-adjust: exact才能保留颜色。
打印时颜色全变灰，不是你 CSS 写错了，而是浏览器默认启用 color-adjust: economy（旧名 -webkit-print-color-adjust: economy），主动降级或丢弃颜色。必须显式声明 exact 才能保留你写的 color 和 background-color。
为什么 @media print 里写了 color 却还是灰的
因为 color 属性本身生效，但浏览器在打印通道中会二次干预：即使你写了 color: #e74c3c，只要没关掉省墨机制，Chrome/Edge/Firefox 都可能把它压成灰度值。这不是渲染失败，是主动压制。
-
@media print块内必须同时写color-adjust: exact和-webkit-print-color-adjust: exact，缺一不可 - 只写
color不起作用；只写!important也不起作用；只写其中一个前缀，部分浏览器仍会忽略 - 该属性**只在
@media print内有效**，写在常规样式表里完全无效 - 不要用
* { ... }全局覆盖——某些浏览器对通配符支持不稳定，建议精确作用到关键容器（如.invoice、.report-header）
background-color 打印不出来？先看 color-adjust 是否生效
background-color 在打印中被禁用，比 color 更彻底。它不仅受 color-adjust 控制，还依赖用户浏览器的「打印背景图形」开关——而这个开关默认关闭，且你无法通过 CSS 强制打开。
- 必须配合
color-adjust: exact+-webkit-print-color-adjust: exact，否则background-color一定为空 - 即使开了
exact，Firefox 仍可能忽略background-color，建议加!important提权 - 渐变（
linear-gradient）、半透明色（rgba(0,0,0,0.1)）、background-image基本无法可靠打印，别试 - 稳妥做法：用纯色 + 边框 + 文字标注替代视觉层次，例如用
border-left: 4px solid #3498db表示高亮区块
color-adjust 和 print-color-adjust 到底用哪个
两者等价，但兼容性路径不同：print-color-adjust 是旧规范名，color-adjust 是现代标准名。目前所有主流浏览器都支持双写，且行为一致。
- 推荐写法：
color-adjust: exact; print-color-adjust: exact; -webkit-print-color-adjust: exact; -
print-color-adjust在 caniuse 上标为「部分支持」，实际测试中 Chrome 120+、Edge 122+、Firefox 115+ 均已稳定识别color-adjust - Autoprefixer 当前版本（v10.4+）会自动补全
-webkit-print-color-adjust，但不会加print-color-adjust，需手动补全 - 不要只依赖 Autoprefixer —— 它不处理
@media print内的特殊逻辑，容易漏掉关键声明
黑白打印机下颜色还有意义吗
有，但意义完全不同。普通激光/喷墨黑白机能把 #ff6b6b 和 #4ecdc4 都压成相近灰度，人眼根本分不出差异；而真正起作用的是明度对比、边框粗细、符号标记这些「非色彩维度」。
- 别用色差表达状态（如红=错误 / 绿=成功），改用文字（
[ERROR]）、图标（::after { content: "✗" }）或纹理（background: repeating-linear-gradient(...)） - 如果必须保留彩色输出，提醒用户检查打印预览里的「背景图形」选项是否勾选——但这不能自动化，只能作为辅助说明
- 最保险的方案：设计两套语义层，彩色用于屏幕，黑白适配层（如 class="print-only-status"）专供打印媒体查询
真正难的不是加那几行 exact，而是得提前想清楚：哪些颜色信息在纸上不可替代，哪些只是屏幕时代的视觉糖。一旦依赖渐变、透明、背景图来传递关键信息，打印时就注定丢失——这不是 CSS 能修的，是设计决策问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
