RGBA颜色打印时变黑或消失，因打印机和浏览器打印引擎不支持alpha通道，会将rgba降级为rgb或纯黑；需用color-adjust: exact配合纯色值，或改用border替代背景实现稳定打印效果。
RGBA颜色在打印时变黑或消失，不是写法错误，而是打印机和浏览器打印引擎根本不支持 alpha 通道——rgba(0, 0, 0, 0.5) 会被直接降级为 rgb(0, 0, 0)，甚至渲染成纯黑块；transparent 等价于 rgba(0, 0, 0, 0)，同样不可靠。
为什么 rgba() 在打印预览里显示正常，打出来却变黑？
打印预览只是渲染快照，不等于真实输出。Chrome/Safari 的打印引擎会静默丢弃所有含 alpha 的颜色值，并用黑色兜底（尤其当底色未明确定义时）。LODOP 等第三方打印控件更甚：rgba(0, 123, 255, 0.1) 直接变成实心蓝黑块，毫无过渡。
-
rgba(255, 255, 255, 0)可能透出白底，但rgba(0, 0, 0, 0)几乎必黑 - PostCSS 插件如
postcss-rgba-fallback只处理rgba()，对hsla()、transparent或 Sass 的fade-out()无效 - Tailwind 的
bg-blue-500/20编译后仍是rgba()，需检查构建产物中是否残留
@media print 中必须同时声明 color-adjust 和纯色值
光写 @media print { background-color: rgba(44, 62, 80, 0.9); } 没用——它会被忽略或降级。真正生效的组合只有：
- 目标元素上显式设置不带 alpha 的颜色：
background-color: #2c3e50或background-color: rgb(44, 62, 80) - 同一规则内必须包含：
-webkit-print-color-adjust: exact和print-color-adjust: exact - 这两条声明不继承，不能只写在
body上，得落在具体元素上，比如.invoice-header、.status-badge
border 替代 background-color 才真正稳定
依赖 background-color 实现的视觉结构（分割线、边框、色块）在打印时极易丢失，因为浏览器默认过滤“装饰性背景”。而 border 属性不受“打印背景图形”开关影响，强制输出。
立即学习“前端免费学习笔记（深入）”；
- 水平分隔线别用
div { height: 1px; background: #ccc; }，改用div { border-bottom: 1px solid #ccc; } - 卡片外框优先用
border: 1px solid #e0e0e0，而非box-shadow或背景模拟 - 表格隔行效果不用
tr:nth-child(odd) { background: #f9f9f9; }，改用tr:nth-child(odd) { border-bottom: 1px solid #eee; } - 注意：border 颜色同样要走
color-adjust: exact，否则浅灰边框可能被淡化
如何快速定位页面中残留的 rgba()？
开发者工具控制台运行这段脚本，能找出当前计算样式中仍含 rgba() 的元素（注意：它只反映最终计算值，不保证源码已清理）：
Array.from(document.querySelectorAll('*')).filter(el =>
getComputedStyle(el).backgroundColor.includes('rgba') ||
getComputedStyle(el).color.includes('rgba')
).map(el => el.tagName + '→' + getComputedStyle(el).backgroundColor)
更可靠的方式是搜索构建后的 CSS 文件，用正则 rgba\([^)]*?,\s*[^)]*?,\s*[^)]*?,\s*[^1][^)]*?\) 匹配非完全不透明的用例；Sass/Less 变量、CSS 自定义属性（var(--bg-primary)）也需确认其最终解析值不含 alpha。
实际打印永远比打印预览更严格——哪怕 DevTools 里看到 color-adjust: exact 已生效，也要导出 PDF 或真机打印验证，尤其是 LODOP 或企业级打印系统，它们对 alpha 的容忍度几乎为零。
