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 暗示或诱导用户取消勾选
• 唯一能做的，是在打印按钮旁加一行小字提示：“请在打印设置中取消勾选「仅打印文本」”

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

很多人给

例如

自己设置了 background-color: white，就会盖掉 的背景；或者用了 border-collapse: collapse 后，边框颜色干扰了视觉判断。 建议直接给 td、th 显式设 background-color，别依赖继承 避免在 @media print 中用 background-image，多数浏览器仍不支持打印背景图，哪怕写了 exact 如果用 iText7 或 wkhtmltopdf 转 PDF，这些 CSS 属性依然有效，但需确认 HTML 渲染阶段已加载完整 print 样式 实际生效的关键不在“写几个属性”，而在于三个硬性条件同时满足：媒体查询正确、元素显式着色、用户设置配合。少一个，就白写。 好了，本文到此结束，带大家了解了《HTMLCSS打印保留背景色设置方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！ UOM平台入口与管理功能全解析 上一篇 UOM平台入口与管理功能全解析 下一篇 Java Map接口解决键值映射问题 查看更多 最新文章 文章 · 前端   |  11分钟前  |   Flex布局实现自适应高度模块 404浏览 收藏 文章 · 前端   |  18分钟前  |   AST优化：将var改为let/const方法 284浏览 收藏 文章 · 前端   |  18分钟前  |   Flex布局子元素内容溢出解决方法 189浏览 收藏 文章 · 前端   |  22分钟前  |   CSS打包教程：Webpack配置css-loader和style-loader 140浏览 收藏 文章 · 前端   |  26分钟前  |   浮动元素高度塌陷怎么解决 121浏览 收藏 文章 · 前端   |  30分钟前  |   ReactHooks表单验证实战指南 225浏览 收藏 文章 · 前端   |  31分钟前  |   CSS镂空文字效果怎么实现 295浏览 收藏 文章 · 前端   |  33分钟前  |   ChromeCPU节流影响低端体验测试 309浏览 收藏 文章 · 前端   |  35分钟前  |   HTML5 img标签srcset用法及响应式图片加载教程 298浏览 收藏 文章 · 前端   |  36分钟前  |   ServiceWorker流式数据拦截与存储方法 470浏览 收藏 文章 · 前端   |  37分钟前  |   HTML表格border-spacing设置详解 145浏览 收藏 文章 · 前端   |  39分钟前  |   image-set()旧版内核加载问题解决方法 314浏览 收藏 资料下载 编程学习资料下载 精选 编程（Golang、Python、Java、C++、JavaScript等） 教程、电子书与示例源码，一键打包本地下载学习。 立即下载 查看更多 课程推荐 前端进阶之JavaScript设计模式 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 543次学习 GO语言核心编程课程 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 516次学习 简单聊聊mysql8与网络通信 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 500次学习 JavaScript正则表达式基础与实战 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 487次学习 从零制作响应式网站—Grid布局 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 485次学习 查看更多 AI推荐 ChatExcel酷表 ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。 5668次使用 Any绘本 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。 6082次使用 可赞AI 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。 5912次使用 星月写作 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。 7863次使用 MagicLight MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。 6299次使用 查看更多 相关文章 JavaScript函数定义及示例详解 2025-05-11 502浏览 优化用户界面体验的秘密武器：CSS开发项目经验大揭秘 2023-11-03 501浏览 使用微信小程序实现图片轮播特效 2023-11-21 501浏览 解析sessionStorage的存储能力与限制 2024-01-11 501浏览 探索冒泡活动对于团队合作的推动力 2024-01-13 501浏览 关于我们 免责声明 意见反馈 联系我们 内容提交 Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！ 技术交流群 Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1 关注公众号 Golang学习网 密码登录在这里 微信扫码登录或注册 打开微信扫一扫，快速登录/注册 登录即同意 用户协议 和 隐私政策 微信登录更方便 密码登录 注册账号 忘记密码 登录 注册 登录即同意 用户协议 和 隐私政策 返回登录 重置密码 发送验证码 重置密码