-webkit-print-color-adjust: exact 有时不生效，因其仅适用于 webkit 内核浏览器，且须满足三条件：置于@media print内、作用于具体元素、配合显式color或background-color声明。
为什么 -webkit-print-color-adjust: exact 有时不生效
它只对 WebKit 内核浏览器（Chrome、Safari、Edge 新版）起作用，且必须满足三个条件：写在 @media print 块内、作用于具体元素（不能只挂 body）、配合显式声明的 color 或 background-color。常见失效场景包括：
• 把它写在屏幕样式里，或放在 @media screen 中
• 只给 body 加该属性，但子元素用 inherit 或未重设颜色
• 元素本身 background-color 是 transparent 或 rgba(0,0,0,0)，这些值在打印时被当作“无背景”处理
print-color-adjust: exact 和 -webkit-print-color-adjust: exact 怎么配
前者是标准属性，Firefox 99+ 和新版 Chrome/Safari 都支持；后者是 WebKit 前缀，用于兼容旧版 Chrome 和 Safari。两者必须同时存在，且建议加 !important 防止被覆盖：
• 不要只写一个，Firefox 忽略 -webkit-，旧 Chrome 忽略无前缀版
• 不要用 initial 或 unset 作为值，只有 exact 有效
• 如果目标元素是动态生成的（如 React 组件），需确保样式能穿透到真实 DOM 节点，而不是被 CSS-in-JS 的 scope 规则隔离
Firefox 打印背景色仍丢失？检查用户设置和降级路径
Firefox 对背景图和部分背景色更保守，即使写了 print-color-adjust: exact，只要用户在打印对话框里勾选了「仅打印文本」（Print text only），所有背景都会被强制禁用——这个开关无法用 CSS 关闭。
• 用 @supports (print-color-adjust: exact) 包裹关键背景规则，内部再加一层 border 或 box-shadow 作为视觉 fallback
• 避免把二维码、水印文字等关键信息放在 background-image 里，改用 img 标签或 ::before + content
• 测试时务必用「另存为 PDF」而非仅看预览，某些渲染差异只在真实输出阶段暴露
RGBA 颜色在打印时变灰甚至消失的根本原因
打印机硬件不支持 alpha 通道，浏览器在打印流程中会丢弃透明度信息，导致 rgba(0, 0, 0, 0.7) 这类值被转成不可控的灰阶，甚至直接降为白色（尤其在浅底上）。
• 所有 rgba()、hsla()、带 alpha 的 color-mix() 都要替换为纯 rgb()、hex 或命名色
• Sass/Less 中的 fade-out()、transparentize() 等函数容易悄悄输出 rgba，构建后需 grep 检查：grep -r "rgba(" src/
• oklch() 和 lch() 等新色彩空间函数在打印时行为不稳定，目前无可靠 fallback 方案，生产环境建议禁用
print-color-adjust: exact 只是打开阀门的第一步，真正稳定输出得靠显式颜色声明 + 用户提示 + 降级视觉结构。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
