在将网页内容输出到纸质文档时，不少开发者发现页面里设置好的背景色、表格边框色甚至文字颜色在打印预览中消失了。这种现象并不是代码写错，而是浏览器出于节省墨水与简化输出的考虑，在打印环境下默认清除了大量颜色信息。要解决这个问题，必须理解打印媒体与屏幕媒体的差异，并为print单独编写色彩规则。
为什么屏幕上的颜色打印时会丢失
浏览器在渲染页面时，会根据不同的媒体类型应用不同的默认行为。屏幕媒体（screen）追求丰富视觉表现，而打印媒体（print）更关注可读性与耗材成本。当没有显式声明打印样式时，浏览器会沿用屏幕样式，但会自动忽略多数元素的背景色，并将部分低对比度前景色调整为黑色或去除。
这种机制导致很多依靠背景色区分状态的报表、依靠色块标注的分类列表，在纸上变成纯白底黑字，信息层级完全被打平。例如一个用浅红色背景标记异常的表格行，打印后就和平常行毫无区别。根本原因在于CSS规范允许用户代理在打印时优化颜色，而我们没有用@media print给出明确指令。
使用@media print分离打印颜色
最直接的方式是在样式表中加入打印媒体查询，把需要保留的颜色在打印场景下重新声明一遍。这样屏幕显示用原有规则，打印时则套用print块里的覆盖规则。
下面示例展示如何为表格在打印时强制显示表头背景与异常行背景：
/* 屏幕默认样式 */
.table th {
background: #337ab7;
color: #fff;
}
.row-error {
background: #f2dede;
}
/* 打印媒体单独定义颜色 */
@media print {
.table th {
background: #337ab7 !important;
color: #fff !important;
}
.row-error {
background: #f2dede !important;
}
}
在上面的代码中，我们为打印环境再次指定了与屏幕一致的背景色，并加上!important提高优先级，防止被浏览器默认打印样式覆盖。这种写法结构清晰，便于维护，也是最符合标准的方式。
需要注意的是，仅写颜色值还不够，有些浏览器仍会丢弃背景。此时要结合颜色保留属性，见下一节。
用color-adjust属性强制保留背景
CSS的color-adjust（及带前缀的-webkit-print-color-adjust）用来告诉浏览器：不要为了打印优化而牺牲元素的颜色准确性。将其设为exact可要求浏览器尽可能原样输出颜色。
以下代码演示如何在打印时全局启用颜色保留：
@media print {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
上述规则会让所有元素在打印时尝试保留背景与前景色。不过该属性并非绝对强制，部分浏览器在用户手动勾选“背景图形”选项前仍可能忽略，因此它通常作为@media print中颜色定义的补充手段。
更稳妥的做法是：在打印样式里既重写关键颜色，又对重要容器开启exact调整，同时提示用户在打印对话框中勾选背景图形选项，三重保障降低丢失概率。
完整打印颜色方案示例
下面给出一个综合示例，包含屏幕与打印分离、关键色重写以及颜色保留声明，可直接用于报表类页面。
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; }
.report { width: 100%; border-collapse: collapse; }
.report th { background: #444; color: #fff; }
.report td { border: 1px solid #ccc; padding: 8px; }
.warn { background: #ffe0b2; }
@media print {
.report th {
background: #444 !important;
color: #fff !important;
}
.warn {
background: #ffe0b2 !important;
}
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
</style>
</head>
<body>
<table class="report">
<tr><th>项目</th><th>状态</th></tr>
<tr class="warn"><td>磁盘空间</td><td>偏低</td></tr>
<tr><td>内存</td><td>正常</td></tr>
</table>
</body>
</html>
这个页面在屏幕上显示深色表头与橙色警告行，打印时通过print媒体查询和exact调整，能在纸上维持同样色彩结构。相比单纯依赖屏幕样式，该方案显著提升了纸质文档的信息辨识度。
实际项目中，建议把打印样式独立成print.css并通过link的media属性引入，保持主样式整洁。同时针对激光打印机与喷墨打印机做少量对比测试，确认色块边缘清晰、无晕染。
常见误区与排查清单
一个典型误区是认为写了background就能打印，结果漏掉@media print和color-adjust，导致在Chrome等浏览器仍被去色。另一个误区是对所有元素无差别开启exact，可能造成墨水浪费且某些浏览器不支持前缀属性时失效。
排查时可按以下顺序：确认是否使用@media print单独定义颜色；确认是否对关键元素加!important；确认是否声明print-color-adjust；最后在浏览器打印预览中检查“背景图形”是否开启。逐项核对基本能解决九成以上的打印丢色问题。
css_print_mediaprint_color-webkit-print-color-adjust修改时间：2026-08-10 14:51:38