color-adjust: exact 能强制打印背景色，但需满足三前提：写在@media print内、目标元素显式声明background-color、用户未勾选“仅打印文本”；否则失效。

打印时背景色丢失，不是你CSS写错了，而是浏览器默认禁用——color-adjust: exact 能强制开启，但只对支持它的浏览器生效，且必须配合 @media print 和显式颜色声明才起作用。

为什么 color-adjust: exact 有时没反应

这个属性本身不“开启全局打印”，它只是告诉浏览器：“别省墨水，按我写的颜色打”。但它有三个硬性前提：

• color-adjust: exact 必须写在 @media print 块内部，不能只写在屏幕样式里
• 目标元素必须显式声明 background-color（不能靠继承，也不能是 transparent 或 rgba(0,0,0,0)）
• 用户浏览器打印设置里如果勾选了“仅打印文本”（Chrome/Firefox 都有这选项），CSS 完全失效——代码无法绕过

-webkit-print-color-adjust 和 print-color-adjust 的区别

它们干同一件事，但兼容范围不同：

• -webkit-print-color-adjust: exact：Chrome、Safari、Edge（Chromium 内核）认这个
• print-color-adjust: exact：是标准属性，Firefox 107+ 和新版 Chrome 支持
• color-adjust: exact：更老的写法，目前基本被前两者覆盖，不建议单独用

稳妥写法是三者都写，顺序放前面的优先匹配：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

@media print {<br>  .report-header {<br>    background-color: #4a5568 !important;<br>    -webkit-print-color-adjust: exact;<br>    print-color-adjust: exact;<br>    color-adjust: exact;<br>  }<br>}

哪些场景下即使加了 exact 也打不出背景

不是所有背景都能靠 CSS 强制出来，尤其以下情况：

• background-image：Firefox 对它极其保守，哪怕写了 color-adjust: exact，只要用户开了“仅打印文本”，图就消失
• 浅灰背景（如 #f8f9fa）：打印机驱动可能自动转为白纸，文字对比度低导致看不清
• 父容器设了 background-color，子元素没设但想“透出”背景：打印时不会继承，必须子元素自己声明
• 使用 box-shadow: inset 模拟背景色：打印时通常不渲染，别依赖

比 color-adjust 更可靠的替代方案

当背景承载关键信息（比如二维码、色块标识、水印文字），别赌用户是否开了“背景图形”——改用浏览器必打的元素：

• 把背景色区域换成 ，SVG 背景可缩放、可打印、无兼容问题
• 用伪元素 ::before + content + background-color，再加 color-adjust: exact，比直接设在元素上更稳定
• 纯线条类背景（如分割线）：彻底放弃 background-color，改用 border-top: 1px solid #000 —— border 打印零失败

真正棘手的从来不是加哪条 CSS，而是判断这个背景色是不是“非打不可”；如果是，就别用 background，换 border、img 或伪元素——这才是生产环境里没人告诉你但天天在用的解法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！