打印时css颜色丢失是因浏览器默认禁用背景色和颜色打印，需在@media print中显式设置color、background-color，并添加-print-color-adjust: exact;声明，同时提示用户勾选“背景图形”选项。
打印时CSS颜色丢失，通常是因为浏览器默认启用“仅打印文本”或“节省墨水”模式，导致背景色、文字颜色等被忽略。解决方法是为 @media print 媒体类型显式定义所需颜色，并禁用浏览器的自动简化行为。
确保 print 媒体查询中显式设置颜色
浏览器在打印时会忽略未在 @media print 中重申的样式。即使屏幕样式已设颜色，也必须在 print 块里重新声明：
- 文字颜色用
color（如color: #2c3e50;），不能依赖继承 - 背景色需主动开启（默认被禁用），用
background-color并配合-webkit-print-color-adjust: exact;和print-color-adjust: exact; - 避免使用
transparent或rgba(..., 0)等隐式无色值
强制启用彩色打印支持
部分浏览器（尤其是 Chrome 和 Safari）默认关闭背景图形打印。需在相关元素上添加：
-webkit-print-color-adjust: exact;print-color-adjust: exact;- 这两条声明需写在
@media print内部，且作用于具体元素（如.header、.card），不能只写在body上
避开系统级“灰度打印”干扰
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 中避免依赖浅灰、低对比色（如
#eee），改用深灰或黑字提升可读性 - 提示用户：打印前在浏览器打印预览中手动勾选「背景图形」或「颜色」选项（Chrome 地址栏右侧「更多设置」里）
- 必要时用
@media print { * { -webkit-print-color-adjust: exact !important; } }全局兜底（慎用，影响性能）
测试与调试技巧
真实验证比预览更可靠：
- 用
Ctrl+P（Win）或Cmd+P（Mac）打开打印预览，切换「目标打印机」为「另存为 PDF」，查看生成效果 - 禁用浏览器扩展（尤其广告拦截类），某些插件会注入样式干扰 print 媒体
- 在
@media print中临时加一条border: 2px solid red;测试规则是否生效
