HTMLCSS打印保留背景色设置方法

想让网页打印时真正保留背景颜色？关键在于正确使用 `print-color-adjust: exact` 及其兼容写法——它必须严格置于 `@media print` 块内，目标元素需显式声明非透明的 `background-color`，且用户打印设置中必须关闭“仅打印文本”选项；同时为兼顾 Chrome、Firefox、Safari 等浏览器，应并行添加 `-webkit-print-color-adjust` 和 `color-adjust` 并配合 `!important` 防止被覆盖，而表格、嵌套容器等易被忽略的子元素也需单独设置背景色，否则再完整的 CSS 也会因任一条件缺失而失效。

为什么 print-color-adjust: exact 单独写没用

它必须出现在 @media print 块里，否则浏览器直接忽略。写在普通样式表或 @media screen 里完全无效——不是兼容性问题，是规范强制要求的生效上下文。

常见错误现象：打印预览里背景还是白的，开发者工具里能看到样式被划掉（strikethrough），说明该规则未被 print 媒体查询识别。

• print-color-adjust: exact 只对 @media print 内的匹配元素起作用
• 不能靠继承：目标元素（比如
  ）必须自己声明 background-color，不能只依赖父级颜色
• background-color: transparent 或 rgba(0,0,0,0) 算“无色”，exact 不会触发渲染

三属性并写才是稳妥做法

不同浏览器认不同的前缀，光写 print-color-adjust 会漏掉 Chrome 旧版、Safari 或 Firefox 107 之前的用户。目前最全且安全的写法是：

/* 必须放在 @media print 内 */
@media print {
  .report-section,
  table,
  .highlight-box {
    background-color: #eef2ff;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

注意：!important 不是为了“压过其他样式”，而是防止某些打印插件（如 vue-print-nb）或框架注入的 reset 样式覆盖它。

• -webkit-print-color-adjust：Chrome、Edge（Chromium）、Safari 必须有
• color-adjust：W3C 标准属性，新版 Chrome/Firefox 支持良好
• print-color-adjust：Firefox 107+ 和部分旧版 Chrome 的 fallback

用户端设置会彻底绕过所有 CSS

如果用户在 Chrome 或 Firefox 的打印对话框中勾选了「仅打印文本」（Print text only），那么无论你写多少个 exact 都不会生效——浏览器此时根本不会解析任何背景相关样式。

这不是 bug，是主动限制：这个选项优先级高于所有 CSS，代码无法检测或干预。

• 无法用 JS 判断用户是否勾选了该选项
• 不能通过 CSS 暗示或诱导用户取消勾选
• 唯一能做的，是在打印按钮旁加一行小字提示：“请在打印设置中取消勾选「仅打印文本」”

表格和嵌套容器容易漏掉声明

很多人给

例如