打印时背景色不显示是因为浏览器默认禁用背景输出，必须在@media print中对具体元素同时声明color-adjust: exact和-webkit-print-color-adjust: exact，且该属性不继承、不可简写、需配合显式background-color使用，否则颜色不会进入打印流水线。
打印时背景色不显示，不是你写错了 CSS，而是浏览器默认禁用背景输出——必须在 @media print 里对具体元素显式启用 color-adjust: exact 和 -webkit-print-color-adjust: exact，否则颜色根本不会进打印流水线。
为什么 background-color 在打印预览里完全失效
Chrome、Edge 默认启用 color-adjust: economy（旧名 -webkit-print-color-adjust: economy），强制把所有背景色降为白底；Firefox 虽稍宽松，但遇到 rgba()、hsla() 或透明值仍会静默丢弃。更关键的是：这些属性不继承，body { color-adjust: exact } 对子元素完全无效。
- 只在屏幕样式里写了
background-color: #e74c3c？打印引擎压根不读 -
background-color默认被忽略，哪怕加了!important也没用 -
rgba()、transparent全部失效——打印机不处理 alpha 通道 - 开发者工具的“打印预览”只是渲染快照，不代表真实驱动输出
@media print 中必须同时写两个 color-adjust 属性
仅靠 background-color 声明毫无意义，真正起效的是这两行声明，且必须放在 @media print 块内、作用于目标元素本身：
@media print {
.invoice-header,
.status-success,
.table-row--urgent {
background-color: #ecf9f2;
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}
-
-webkit-print-color-adjust: exact是目前最可靠、兼容性最好的方案，尤其对 Chrome 和 Safari 有效 - Firefox 更依赖标准名
color-adjust: exact，所以两者必须同时写 - 不能只写在
body或通配符上，必须逐个元素设置（* { color-adjust: exact }在 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-left: 4px solid #27ae60，而非整行background-color - SVG 内嵌颜色也受
color-adjust影响，纯色<rect></rect>比渐变填充更稳妥
Firefox 用户还得手动改 about:config
即使 CSS 写得再全，Firefox 默认仍可能屏蔽背景输出，必须额外确认底层配置项：
- 地址栏输入
about:config→ 搜索print.print_background→ 双击设为true - 再搜索
print.print_background_images→ 同样设为true - 该设置立即生效，无需重启浏览器
- 注意：企业策略或某些扩展可能锁定这些选项，此时只能靠
border+color-adjust双保险
真正麻烦的不是写几行 CSS，而是得同时兼顾浏览器默认行为、用户本地设置、组件库生成的 class 名、以及 rgba() 这类隐含的透明陷阱——漏掉任意一环，打印出来就是一片白底黑字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
