打印预览颜色变灰、背景消失是因为浏览器默认禁用彩色输出，必须在@media print中对具体元素显式声明color-adjust: exact和-webkit-print-color-adjust: exact，且该属性不继承，需逐个元素设置。
打印预览里颜色变灰、背景消失，不是你的 color 或 background-color 写错了，而是浏览器默认禁用彩色输出——必须在 @media print 里对具体元素显式启用 color-adjust: exact 和 -webkit-print-color-adjust: exact，否则 CSS 颜色根本不会进打印流水线。
为什么 color 和 background-color 在打印预览里不生效
Chrome、Edge 默认启用 color-adjust: economy（旧名 -webkit-print-color-adjust: economy），强制把所有颜色降为灰度；Firefox 虽稍宽松，但遇到 background-image 或透明值仍会静默丢弃。更关键的是：这些属性不继承，body { color-adjust: exact } 对子元素完全无效。
- 只在屏幕样式里写了
color: #e74c3c？打印引擎压根不读 -
background-color默认被忽略，哪怕加了!important也没用 -
rgba()、hsla()、transparent全部失效——打印机不处理 alpha 通道 - 开发者工具的“打印预览”只是渲染快照，不代表真实驱动输出
必须在 @media print 中逐个声明 color-adjust: exact
不能靠通配符兜底，也不能只写在顶层容器上。要让哪些元素带颜色，就得让它们自己带上校准声明：
- 对发票标题、状态标签、高亮行等关键元素，用明确类名单独写规则，例如：
@media print { .invoice-header, .status-success, .table-row--urgent { color: #27ae60; background-color: #ecf9f2; color-adjust: exact; -webkit-print-color-adjust: exact; } } - 避免
* { color-adjust: exact !important }—— Firefox 对通配符支持不稳定，且拖慢打印样式解析 - 如果用 styled-components 或 Vue scoped style，确认它生成的 class 名能被
@media print规则匹配到（比如没被哈希截断）
用 border 替代 background-color 画线条更可靠
依赖 background-color 绘制的分割线、色块、边框，在打印时大概率直接消失。浏览器对 border 的支持远比背景稳定：
- 把
.line { height: 1px; background-color: #34495e; }改成.line { border-top: 1px solid #34495e; } - 需要上下双线？用
border-top+border-bottom，别堆两个div - 圆角色块？改用
border-radius+border模拟，或降级为纯色填充 + 加粗文字强调 - 动态 JS 生成的线条（如图表标注线），创建时直接设
border，别走background-color路径
用户端设置和颜色写法也得同步检查
即使 CSS 全对，最终输出还卡在用户那一步：
- 提醒用户在 Chrome 打印预览右上角「更多设置」里勾选「背景图形」；Firefox 是「打印背景颜色」
- 别用浅灰（如
#eee）做关键文字色——打印机识别力弱，优先用#333或#000 - 所有颜色值统一用十六进制（
#007bff）或 rgb（rgb(0, 123, 255)），彻底剔除rgba()和变量引用 - SVG 图标若含
fill颜色，需在@media print里重申，且不能依赖 CSS 变量传值
最易被忽略的一点：color-adjust 必须作用于最终渲染的 DOM 元素本身，而不是它的父容器；而用户是否勾选「背景图形」，是你代码永远无法 override 的最后一道闸门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
