1

我正在尝试从 twitter bootstrap 打印徽章。

看看这个小例子。左边是一个简单的徽章，显示数字“4”：

<span class="badge badge-warning">4</span>

右边是没有“@media print”语句的 Twitter Bootstrap css 文件，它禁用了打印的背景颜色。如果您尝试打印此页面（打印预览），则徽章会失去颜色。如何使徽章在印刷品上可见？

4

2 回答 2

2

buffjape 提供的公认解决方案需要特定于浏览器的操作，开发人员不喜欢依赖它。

或者，您可以为徽章添加边框。它保留了徽章的形状和空间，并使用更少的墨水/墨粉（因为它是边框而不是填充）。

假设您正在使用默认的徽章 CSS 值，请将其添加到您的 CSS：

@media print {
  .badge {
    padding: 2px 6px;
    border: 1px solid #000;
  }
}

线条将padding默认值四面缩小 1px，使徽章的外观保持不变；即，如果您有带有徽章的页面的“打印预览”，用户仍然会正常看到徽章。

默认#ddd颜色在标准黑白激光打印机上看起来很褪色，所以我倾向于在打印时将所有颜色转换为黑色。根据需要进行调整。

于 2015-09-28T16:18:06.097 回答
1

在浏览器中启用“打印背景颜色和图像”...

Chrome - 勾选打印预览左下角的复选框。

IE - 单击设置（齿轮图标，左上角）然后勾选复选框（弹出窗口的中左）

于 2013-09-10T10:53:01.907 回答