Question

当我使用bootstrap时，它会在我尝试打印页面时删除背景颜色。几乎我网站上的所有内容都是使用bootstrap类，所以我想在bootstrap之外避免很多手动CSS。我发现bootstrap使用@media print删除背景颜色。我也使用了一个bootstrap主题（主题联合），它也删除了背景颜色。

主题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＆＃39; s，@ necolas当时的大学） - 它的目的是使所有浏览器的行为相同。这些家伙选择＆＃34;正常化＆＃34; css有一个很好的理由：

对于大多数浏览器，可以选择包含或排除背景颜色，因此即使在同一浏览器中，行为也不是标准的。想象一下，一个背景非常暗的白色文本的网站 - 当关闭背景打印时，它看起来就像你没有打印任何东西 - 实际上你在没有（白色）背景上打印白色文字。 / p>

没有办法考虑到颜色的所有不同用途，因此他们选择黑色（字体）和白色（背景，实际上是透明的＆＃39;）。即使是黑色的选择也经过深思熟虑 - 它是一种更好的打印解决方案，因为大多数彩色打印机都有更多的黑色墨水/墨粉＆＃34; （更经济）他们不需要混合颜色来制作黑色（如此之快）。

请记住，Bootstrap也是一个＆＃34;框架＆＃34; - 如果你愿意的话，这是一个起点 - 并且赞赏@mdo和@necolas在建立可预测的基线方面有远见的想法。 （不，我不认识他们。）

<强>都能跟得上...

所以这里的想法是：＆＃34;如果我们可以“回去”怎么办？并且取消了这个。不幸的是，CSS不能像那样工作 - 是的浏览器在一个＆＃34;队列中加载CSS声明＆＃34;最后一个声明获胜的地方（LIFO，或后进先出），但我不知道删除此堆栈的方法。所以CSS开发人员只需添加更多内容......

所以我们可以假设我们可以回过头来添加一个* { background-color: inherit }。问题是inherit恢复为父属性，但*是根，因此没有任何内容可以恢复。同样适用于initial！

也许吧！

所以我们留下了4个选项，没有一个是你所希望的，但它就是它的本质。难度顺序：

下载BS（less或sass）源代码，编辑有问题的代码，然后进行编译。（您需要使用本地副本，CDN将无效。）
下载您选择的CSS变体，搜索并删除有问题的代码。（再没有CDN。）
使用getbootstrap.com/customize创建新变体 - 排除＆＃34;打印媒体样式＆＃34; ＆＃34; Common CSS＆＃34;。（同样，没有CDN＆＃39;）
覆盖要打印的特定项目颜色：例如

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

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

<强>最后

嗯，我希望了解为什么至少是一种思考解决方法的方法。我遵循的一般经验法则是，在打印时，背景（应该）始终是白色。当受到限制时，你开始考虑新颖的想法，比如围绕文本的感叹号图标，只有＆＃34; print＆＃34; （@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;
    }
}

这是有效的，因为该规则比bootstrap默认值更具体。

Answer 3

你可以通过从bootstrap.css文件中删除这些行来实现这一点，可能有一个jquery解决方案，但它比擦除几行要复杂得多。：/

或者您可以使用此jsfiddle

中提供的名为html2canvas的插件

Answer 4

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

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

我最终遇到了同样的问题，但发现Chrome在打印对话框中附带了一个显示背景图形选项，在更多设置下完成了！不需要修改Bootstrap（4）。

Answer 7

只需使特异性值更具体，就可以了。像这样：

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

Answer 8

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

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;
        }
    }
}

Bootstrap打印CSS删除背景颜色

8 个答案: