CSS设置打印黑白模式技巧

本文详解了如何在CSS的@media print规则中真正实现强制黑白打印效果，强调浏览器不会自动转换色彩，必须显式重置color为black、background-color为white，并彻底禁用图片、阴影、边框、渐变及Web字体等干扰元素；同时指出常见误区（如遗漏背景色、滥用通配符、忽略第三方组件样式），提供覆盖所有文本、链接、图标和伪元素的安全写法，并推荐使用!important确保优先级，最终让打印输出干净、高对比、省墨且可读性强——告别灰蒙蒙的预览假象，直击真实黑白打印痛点。

如何在 @media print 中强制所有文字和背景变黑白

直接生效的做法是：重置所有颜色相关属性为 black 或 white，并禁用图片、阴影等干扰项。浏览器默认不会“自动转黑白”，所谓“打印预览里看起来灰蒙蒙”其实是设备模拟，不是 CSS 生效结果。

color 和 background-color 必须显式覆盖

很多人只写 color: black，但漏掉 background-color: white，导致打印时深色背景仍保留（尤其卡片、按钮、导航栏），墨水浪费且可读性差。注意：background 简写属性可能带图片或渐变，必须拆开处理。

• 对所有元素统一重置：

  body, div, p, h1, h2, h3, h4, h5, h6, span, a, li, td, th {
    color: black !important;
    background-color: white !important;
    background-image: none !important;
  }

• 避免用 * { ... } —— 某些 UA 样式（如 input、select）可能被忽略，需单独加
• !important 是必要的，否则组件库或框架的内联样式可能压过 print 规则

图片、边框、阴影要一并关掉

彩色图片在黑白打印下常变成大块灰斑，边框线若太细（如 1px solid #ccc）可能消失或糊成一片，阴影则完全无意义。

• 关闭所有图片：

  img, .icon, [role="img"] {
    visibility: hidden !important;
  }

  （用 visibility: hidden 而非 display: none，避免破坏布局高度）
• 边框统一为 1px solid black 或彻底移除：

  border: 1px solid black !important;

• 清除阴影与滤镜：

  box-shadow: none !important;
  filter: none !important;

字体、链接、伪类容易被忽略的细节

打印时 :hover 没用，但 :visited 和 a 默认蓝色仍会输出——除非你主动重写。另外，某些字体（如自定义 Web Font）在打印机上可能回退失败，导致文字错位。

• 所有链接强制黑字+去下划线：

  a {
    color: black !important;
    text-decoration: none !important;
  }
  a::after {
    content: " (" attr(href) ")" !important;
    font-size: 0.8em;
    color: #666 !important;
  }

• 禁用 Web Font，回退到系统安全字体：

  font-family: "Times New Roman", Times, serif !important;

• ::selection 在 print 中无效，不用管；但 ::before/::after 若含图标或颜色，需一并重置

最麻烦的其实是第三方组件——比如一个 el-button 或 Antd Badge，它们的背景色、圆角、微动效都可能绕过你的全局规则。遇到这种，得单独加选择器，或者干脆在打印前用 JS 临时加 class 做兜底。

本篇关于《CSS设置打印黑白模式技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！