如何通过print媒体查询优化CSS，实现打印时的色彩表现？

本文共计864个文字，预计阅读时间需要4分钟。

浏览器默认在打印时会降低色彩，Chrome 和 Edge 会强制启用 `color-adjust: economy`（旧名为 `-webkit-print-color-adjust`）。这会导致你设置的 `color` 属性失效。

必须显式覆盖这个行为才能保留颜色：

• 对需要彩色输出的元素，加 color-adjust: exact（标准属性）
• 兼容老版本 Chrome/Edge，补上 -webkit-print-color-adjust: exact
• 注意：该属性只在 @media print 内生效，写在常规样式里无效

/* 正确写法 */ @media print { .invoice-header { color: #2c3e50; background-color: #3498db; color-adjust: exact; -webkit-print-color-adjust: exact; } }

为什么 background-color 打印不出来？

绝大多数浏览器默认禁用背景图和背景色打印——不是 bug，是用户可调的隐私/省墨设置，但你的 CSS 不能依赖用户手动勾选“打印背景图形”。