打印时渐变背景默认消失是预期行为，因CSS打印规范强制禁用background-image以省墨；@media print中恢复渐变几乎无效，可行方案为用纯色模拟或放弃背景；需注意小屏与打印样式权重及深色模式叠加时的显式声明。
打印时渐变背景默认消失，这不是 Bug 是预期行为
所有主流浏览器在打印预览或实际打印时，都会默认禁用 background-image（包括 linear-gradient()），这是 CSS 打印媒体规范的强制要求，目的是节省墨水、提升可读性。Bootstrap 的 bg-gradient-* 类底层就是 background-image，所以必然不出现——你没写错，它本来就不该打出来。
@media print 里强行恢复渐变几乎无效
虽然可以写：
@media print {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1) !important;
}
}但绝大多数浏览器（Chrome、Edge、Safari）会忽略这条规则。Firefox 是唯一部分支持的，但也仅限于“背景图像启用”选项被手动勾选时（about:config → print.print_backgrounds = true），普通用户不会改这个设置。
真正可行的替代方案只有两个：
- 用
background-color模拟渐变主色（比如取渐变起始色#0d6efd作为打印时的纯色背景） - 完全放弃背景色，靠文字层级、边框、阴影等语义化样式维持可读结构
小屏+打印双条件叠加时的 class 顺序陷阱
如果你用了类似 class="bg-md-gradient-primary bg-light" 这种自定义类组合，注意：@media print 规则必须比 @media (min-width: 768px) 更具体、权重更高，否则小屏下本该回退的 bg-light 可能被覆盖。
推荐写法是显式分离：
.hero-section {
background-color: #f8f9fa; /* 小屏 & 打印 fallback */
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
@media print {
.hero-section {
background-color: #0d6efd !important;
background-image: none !important;
}
}关键点：background-image: none !important 是必须的，否则某些 PDF 导出工具（如 wkhtmltopdf）可能残留半透明残影。
深色模式 + 打印的三重叠加容易被忽略
如果页面同时适配了 @media (prefers-color-scheme: dark) 和打印，别指望浏览器自动处理三者交集。必须单独声明：
@media print and (prefers-color-scheme: dark) {
.hero-section {
background-color: #212529 !important;
}
}否则深色模式用户打印时，可能拿到浅色背景+深色文字的高对比组合，但纸张上实际印出来是灰蒙蒙一片——因为打印机不认暗色主题，只认你最终输出的 background-color 值。
最稳妥的做法：打印样式表里一律用明确的十六进制色值，不依赖变量或系统偏好。
