打印时背景颜色消失是因浏览器默认禁用背景图形输出，需在@media print中为具体元素同时设置-webkit-print-color-adjust: exact和color-adjust: exact。
背景颜色在打印时消失，不是你 CSS 写错了，而是浏览器默认压制了 background-color 和 background-image 的输出。必须在 @media print 里显式启用，且规则要落在具体元素上。
为什么加了 background-color 还是白底？
因为所有主流浏览器（Chrome、Firefox、Edge）默认关闭“背景图形”打印——这是 UA 样式表主动干的，不是 bug。即使你在屏幕样式里写 background-color: #f00，打印预览里照样被清成白底。
- Chrome 默认关掉“Background graphics”（设置路径：
Settings → Advanced → Printing → Background graphics） - Firefox 默认关掉“打印背景颜色和图像”，对应配置项是
print.print_background - 用户手动勾选虽能解决单次问题，但不能作为线上方案
@media print 中必须同时写两个 color-adjust 属性
只写 -webkit-print-color-adjust: exact 或只写 color-adjust: exact 都不够。Chrome/Safari 主认前者，Firefox 主认后者，缺一不可。
- 必须放在
@media print块内，不能混在普通样式里 - 必须作用于实际有背景色的元素，比如
.invoice-header、.table th，不能只写body { ... }或* { ... } - 如果用
styled-components或 Vue scoped style，确认生成的 class 名没被哈希截断，否则@media print规则匹配不到 - 示例有效写法：
@media print { .receipt-header { background-color: #4a5568; -webkit-print-color-adjust: exact; color-adjust: exact; } }
border 比 background-color 更可靠
依赖 background-color 绘制的分割线、色块、边框，在打印时大概率直接消失。哪怕加了 color-adjust，遇到 opacity、rgba() 或某些渲染路径仍可能失效。
立即学习“前端免费学习笔记（深入）”；
- 把线条从
height: 1px; background-color: #000改成border-bottom: 1px solid #000 - 色块可用
border+padding模拟，或直接用outline（部分场景兼容性更好） - 重要信息别塞进
background-image：二维码、水印文字等，改用<img alt="如何修复CSS中printing打印模式下背景颜色不显示的问题？" >或伪元素::before+content
真正容易被忽略的点是：即使写了 color-adjust: exact，如果用户在 Firefox 打印对话框里勾了“仅打印文本”，所有背景都会被无视——这个开关代码无法绕过，只能提前用 border 或 img 降级。
