<p>Bootstrap 5 的 @media print 默认禁用背景色是设计行为，不是 Bug；它通过 * { background: transparent !important } 强制清除所有背景，并要求显式声明 exact 模式与 !important 才能恢复打印背景。</p>
Bootstrap 5 的 @media print 默认禁用背景色是设计行为，不是 Bug
它压根没打算让你打印出背景色——这是 Bootstrap 团队在 v5 中主动移除“默认保留背景”逻辑后的明确选择。v4 还带点妥协，v5 直接把 background: transparent !important 写进全局重置里，覆盖所有元素（包括 *:before 和 *:after），连渐变、rgba、甚至 border 的 background 都一并清空。
bootstrap.min.css 里藏着的打印重置规则长这样
你查它的源码（或 DevTools 的 “Computed” 面板），会看到类似：
@media print {
*:before,
*:after,
* {
background: transparent !important;
color: #000 !important;
-webkit-print-color-adjust: economy !important;
print-color-adjust: economy !important;
}
}注意三点：
-
background: transparent !important不是“没设置”，而是**强制设成透明**，比你写的.alert-danger { background-color: red; }优先级高得多 -
-webkit-print-color-adjust: economy是 Chrome/Safari 的开关，它让浏览器直接跳过颜色计算阶段，background-color声明根本不会进入打印渲染流水线 - 这个规则作用于
*，意味着哪怕你只给一个<span>加了内联style="background: red"，也会被这条兜底规则盖掉
为什么非要这么激进？省墨只是表层原因
真正棘手的是语义冲突和不可控输出：
立即学习“前端免费学习笔记（深入）”；
- 深色主题页面（如黑底白字）一旦用户没手动勾选「背景图形」，印出来就是一张白纸——用户以为没内容，其实是白色文字印在白纸上
- RGBA 背景、半透阴影、渐变在不同打印机驱动下渲染差异极大，有的全黑、有的全白、有的直接报错
- 表格条纹色、卡片浅灰背景、alert 的色块，在 A4 纸上可能降低可读性而非增强——比如
#f8f9fa在复印机下几乎不可见
所以 Bootstrap 5 选择“归零”，把控制权交还给你：你要打什么色，就单独、显式、带 !important 地写清楚，而不是靠继承或默认。
想让某个类（比如 .alert-danger）打印时有背景，必须同时满足三个条件
缺一不可：
- 在
@media print块里重新声明background-color，不能只靠屏幕样式 - 加上
-webkit-print-color-adjust: exact和print-color-adjust: exact—— 这俩必须写在同一选择器里，且不继承 - 加
!important，否则仍会被 Bootstrap 的* { background: transparent !important }覆盖
正确写法示例：
@media print {
.alert-danger {
background-color: #dc3545 !important;
color: #fff !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}最容易漏的是第三点：很多人写了前两条，但忘了 !important 对 color-adjust 同样必要——否则浏览器仍按 economy 模式走。
