打印时背景色不显示是因浏览器默认禁用背景图形，需在@media print中同时设置-webkit-print-color-adjust: exact和color-adjust: exact才能强制启用。
打印时背景色不显示，是因为浏览器默认禁用背景图形
绝大多数浏览器（Chrome、Firefox、Edge）出于节省墨水和纸张的考虑，在打印预览中默认关闭背景色与背景图渲染。这不是 CSS 写错了，而是用户代理样式表主动压制了 background-color 和 background-image 的输出。即使你在屏幕样式里写得再完整，打印时照样白底黑字。
解决路径只有一条：在打印样式中显式启用背景输出，并确保它足够具体、能覆盖默认限制。
@media print 中必须设置 -webkit-print-color-adjust: exact
这是目前最可靠、兼容性最好的强制打印背景方案，尤其对 Chrome 和 Safari 有效。Firefox 虽然支持该属性，但更依赖 color-adjust: exact（标准名），所以两者建议同时写。
常见错误是只加了 background-color 却漏掉这个关键声明，或者把它放在非 @media print 块里，导致无效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 把强制打印背景的规则放在
@media print块内，不要混在屏幕样式里 - 优先使用
-webkit-print-color-adjust: exact，再补一行color-adjust: exact兼容 Firefox - 该声明需作用于实际有背景色的元素上（比如
.card、button），不能只写在body或通配符上 - 若元素用了
opacity或半透明rgba()，部分浏览器仍可能丢弃背景，建议改用background-color: hsla()或纯不透明色
示例：
@media print {
.report-header {
background-color: #4a5568;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
Firefox 下 background-image 仍不打印？检查是否触发了“仅打印文本”模式
Firefox 对背景图的支持更保守。即使写了 color-adjust: exact，如果用户在打印对话框里勾选了“仅打印文本”（Print text only），所有背景都会被忽略——这个选项默认不勾选，但一旦被手动开启，CSS 就完全失效。
这不是你能用代码绕过的限制，属于用户端策略。但你可以提前规避风险：
- 避免依赖
background-image传递关键信息（比如用背景图放二维码或水印文字） - 把重要视觉信息转为
<img>标签或伪元素::before/::after+content，它们不受打印背景开关影响 - 如果必须用背景图，建议加一层降级：用
@supports (color-adjust: exact)包裹，并在不支持时用 border 或阴影模拟区分度
打印样式里 background-color 生效但颜色发灰？注意 sRGB 与设备色彩空间差异
屏幕上看到的 #ff6b6b 在打印机输出时可能偏暗或泛紫，这不是 CSS 错误，而是显示器（RGB）和打印机（CMYK 或厂商专有色域）之间没有自动转换。浏览器不会做色彩管理，直接把 RGB 值交给打印驱动处理。
这意味着：你调得再准的屏幕色，打出来都可能不准。尤其浅色、高饱和色、冷色调最容易失真。
- 对关键打印内容（如票据、标签），优先用深灰（
#333）、黑色或白色，避开亮蓝、荧光绿等敏感色 - 如需精确还原，不要依赖 CSS 背景色，改用 SVG 或 PDF 生成（后端渲染）
- 测试阶段务必用真实打印机+常用纸张实打，别只信打印预览
这件事没法靠加一行 CSS 解决。它卡在渲染管线底层，你只能接受——打印不是屏幕，颜色从来就不一样。
