CSS设置的浅灰色背景打印时变为白色该如何解决

问题根因 #

• 浏览器默认开启了打印省墨模式，会自动过滤页面背景色、背景图，减少油墨消耗，常规屏幕展示的背景样式默认不会在打印时生效。
• 原有CSS未适配打印媒体场景，规则仅对屏幕展示生效。

修复方法 #

1. 新增打印媒体查询适配规则，同时添加浏览器私有属性强制渲染背景：

/* 原有屏幕展示样式保留 */
div {
  background-color: #dcdcdc;
}

/* 新增打印场景专属样式 */
@media print {
  div {
    background-color: #dcdcdc !important;
    /* 兼容Chrome、Edge、Safari等webkit内核浏览器 */
    -webkit-print-color-adjust: exact;
    /* 兼容Firefox浏览器 */
    print-color-adjust: exact;
  }
}

2. 打印时需要手动开启浏览器的背景打印权限，该权限无法通过代码绕过，不同浏览器操作路径如下：

• Chrome/Edge：打印预览页 → 展开「更多设置」→ 勾选「背景图形」
• Firefox：打印设置页 → 勾选「打印背景（颜色和图片）」
• Safari：打印界面 → 点击「显示详细信息」→ 勾选「打印背景」

内容的提问来源于stack exchange，提问作者darkchampionz