Bootstrap 打印 CSS 移除背景颜色

Question

当我使用引导程序时，它会在我尝试打印页面时从所有内容中删除背景颜色。 我网站上的几乎所有内容都使用引导程序类，因此我想避免在引导程序之外使用大量手动 CSS。 我发现 bootstrap 使用 @media print 删除背景颜色。我也在使用引导主题（主题联合），它也删除了背景颜色。

theme-united.css

@media print
*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

bootstrap.min.css

@media print
*, :after, :before {
    color: rgb(0, 0, 0)!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;

有没有办法确保在不编辑这 2 个 CSS 文件的情况下打印时不移除背景颜色？

例如： 当我使用 .alert-danger 时，我希望在屏幕上显示警报危险时打印它，因此将打印为红色框。

参见 JSFiddle： http://jsfiddle.net/7mtk7wrh/

Answer 1

很遗憾，您的问题没有很好的答案 - 但也许如果您了解原因，那么您可以选择前进的方向。

为什么？

Bootstrap 确实使用了@media print { * { color: $fff; background: transparent; }}——但有一个非常可靠的理由。这段代码实际上源自normalizer.css 项目（由当时的@mdo 学院@necolas）——其目的是使所有浏览器的行为都相同。这些人选择“规范化”css 是有充分理由的：

对于大多数浏览器，可以选择包含或排除背景颜色，因此即使是同一个浏览器，这种行为也不是标准的。想象一下，一个背景非常暗且带有白色文本的网站——在关闭背景打印时，看起来你什么都没有打印——而实际上你是在没有（白色）背景的情况下打印白色文本。

无法解释颜色的所有不同用途，因此他们选择了黑色（字体）和白色（背景，实际上是“透明”）。甚至黑色的选择也经过深思熟虑——它是一种更好的打印解决方案，因为大多数彩色打印机都有更多的黑色“墨水/墨粉”（更经济），而且它们不需要混合颜色来制作黑色（所以更快）。

请记住，Bootstrap 也是一个“框架”——如果你愿意的话，这是一个起点——并且感谢 @mdo 和 @necolas 在建立可预测的基线方面有远见地考虑这一点。 （不，我不认识他们。）

不...

所以这里的想法是：“如果我们可以'返回'并取消设置会怎样。不幸的是，CSS 不能那样工作 - 是的，浏览器将 CSS 声明加载到最后一个声明获胜的“队列”中（LIFO，或后进先出），但我不知道有什么方法可以删除这个堆栈。所以 CSS 开发人员只是在最后添加更多......

所以人们会假设我们可以返回那个方式 --- 添加一个* { background-color: inherit }。问题是 inherit 恢复到父属性，但 * 是根，所以它没有什么可恢复的。 initial 也是如此！

也许吧！

所以我们有 4 个选项，它们都不是您所希望的，但它就是这样。按难度排序：

1. 下载 BS（less 或 sass）源，编辑有问题的代码，然后编译。 （您需要使用本地副本，CDN 不起作用。）
2. 下载您选择的 CSS 变体，搜索并删除有问题的代码。 （再次没有 CDN。）
3. 使用getbootstrap.com/customize 创建新变体 - 排除“通用 CSS”下的“打印媒体样式”。 （同样，没有 CDN）
4. 覆盖您要打印的颜色的特定项目：例如

    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

CDN 的 BS 副本现在可以工作了，但是您遇到的问题是用户可能不打印背景并且输出白色（例如黄色）为白色！

终于

我希望了解原因至少是您思考解决方法的一种方式。我遵循的一般经验法则是，在打印时，背景（应该）总是白色的。当以这种方式受到限制时，您会开始思考新颖的想法，例如仅“打印”的文本周围的感叹号图标 (@media only screen { .hidden-screen { display: none; }})

Answer 2

尽管!important 的用法通常不受欢迎，但这是bootstrap.css 中的违规代码

.table td,
.table th {
    background-color: #fff !important;
}

假设您正在尝试设置以下 HTML 的样式：

<table class="table">
    <tr class="highlighted">
      <th>Name</th>
      <th>School</th>
      <th>Height</th>
      <th>Weight</th>
    </tr>
</table>

要覆盖此 CSS，请在样式表中放置以下（更具体的）规则：

@media print {
    table tr.highlighted > th {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

之所以有效，是因为该规则比引导默认值更具体。

Answer 3

您可以通过从bootstrap.css 文件中删除这些行来完成此工作，可能有一个 jquery 解决方案，但它比删除几行要复杂得多。 ：/

或者，您可以使用jsfiddle 中介绍的名为 html2canvas 的插件

Answer 4

我在这里遇到了同样的问题，但发现 Chrome 在打印对话框中带有显示背景图形选项，在更多设置下可以做到这一点！无需修改 Bootstrap (4)。

Answer 5

@Vino 解释得很好。我也遇到了问题，因为 bootstrap.css 强制使背景透明。因此，我在自定义 CSS 文件中自定义了特定元素。请记住将 <.element> 更改为您想要彩色背景而不是透明的元素。

@media print {
	 .element{
		background-color: white !important;
		box-shadow:  inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
	 }
 } 

Answer 6

我也遇到了同样的问题..我只是从我的代码中删除 bootstrap.min.css 然后它对我有用。

Answer 7

只要让特异性值更具体，你应该没问题。 类似：

@media print {
   tbody>tr:nth-child(even)>td {
        background-color: rgb(230, 216, 216) !important;
    }
}

Answer 8

其实是有解决办法的，但这仍然是一个 hack。 它被用于 puppeteer 中的 pdf 生成，因此仅在这种情况下进行了测试，但很可能应该适用于所有现代浏览器。 请记住，不同版本的 Bootstrap 中的 BOOTSTRAP_PRINT_RULE 可能不同。

const BOOTSTRAP_PRINT_RULE = `@media print {
  *, ::after, ::before { color: rgb(0, 0, 0) !important; text-shadow: none !important; background: 0px 0px !important; box-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
  abbr[title]::after { content: " (" attr(title) ")"; }
  a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; }
  blockquote, pre { border: 1px solid rgb(153, 153, 153); break-inside: avoid; }
  thead { display: table-header-group; }
  img, tr { break-inside: avoid; }
  img { max-width: 100% !important; }
  h2, h3, p { orphans: 3; widows: 3; }
  h2, h3 { break-after: avoid; }
  .navbar { display: none; }
  .btn > .caret, .dropup > .btn > .caret { border-top-color: rgb(0, 0, 0) !important; }
  .label { border: 1px solid rgb(0, 0, 0); }
  .table { border-collapse: collapse !important; }
  .table td, .table th { background-color: rgb(255, 255, 255) !important; }
  .table-bordered td, .table-bordered th { border: 1px solid rgb(221, 221, 221) !important; }
}`

for (const styleSheet of document.styleSheets) {
    for (const [index, rule] of Array.from(styleSheet.cssRules).entries()) {
        if (rule.cssText && rule.cssText.includes(BOOTSTRAP_PRINT_RULE)) {
            styleSheet.deleteRule(index)
            return;
        }
    }
}

Answer 9

从带有 SASS 的 Bootstrap 第 4 版开始，您实际上可以将以下变量设置为 false，这将改变这种行为：

$enable-print-styles: false

如果这不是一个选项，下面的脚本会从 CSS 中粗暴地删除所有 @media print 注释。它假定 Bootstrap 是第一个加载的样式表，并且它在 Bootstrap 加载之后运行。

var style = document.styleSheets[0];

[].forEach.call(style.cssRules || [], function (aRule, aIndex) {
   if (aRule.cssText.indexOf("@media print") >= 0) {
      style.deleteRule(aIndex);
   }
});