Html Bootstrap 打印 CSS 删除背景颜色

Bootstrap print CSS removes background color

提问by TheatreOfSouls

When I use bootstrap, it removes the background color from everthing when I try to print my page. Almost everything on my website is using bootstrap classes so I want to avoid a lot of manual CSS outside bootstrap. I've found out that bootstrap uses @media printto remove the background color. I'm using a bootstrap theme as well (theme united) which is removing the background color as well.

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

theme-united.css

主题联合.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

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;

Is there a way to make sure that the background color is not removed when printing without editing these 2 CSS files?

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

For example: When I use .alert-danger, I want that alert danger printed as it is displayed on screen, so would be printed as a red box.

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

See JSFiddle: http://jsfiddle.net/7mtk7wrh/

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

回答by Vino

Unfortunately there is not a good answer to your question - but maybe if you understand the why's then you can choose a way forward.

不幸的是，您的问题没有很好的答案 - 但也许如果您了解原因，那么您可以选择前进的道路。

Why?

为什么？

It's true that Bootstrap uses the @media print { * { color: $fff; background: transparent; }}-- but there is a very solid reason. This bit of code is actually derived from the normalizer.cssproject (by a then college of @mdo 's, @necolas) - it's intent is to make all browsers behave the same. These guys chose to "normalise" the css for a very good reason:

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

With most browsers one can choose to include or exclude background color, so the behaviour is not standard across even the same browser. Imagine for a sec a website with very dark background with white text - when printing with backgrounds off, it will look like you're printing nothing - when actually you're printing white text on no (white) background.

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

There was no way to account for all the different uses of color, so they choose to go black (font) and white (background, actually 'transparent'). Even the choice of black was well thought of -- its a better print solution, as most color printers have more black "ink/toner" (more economical) and they don't need to mix color to make black (so faster).

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

Remember that Bootstrap is also a "framework" - so a starting point if you will - and kudos to @mdo and @necolas for having the foresight to think of this in terms of establishing a predictable baseline. (No, I don't know them.)

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

Nope...

不...

So the thinking here is: "what if we could 'go back' and unset this. Unfortunately CSS does not work like that - yes browsers load the CSS declarations in a "queue" where the last declaration wins (LIFO, or last-in-first-out), but I'm not aware of a way to remove this stack. So CSS developers just add more to the end...

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

So one would assume that we can go back that way --- add a * { background-color: inherit }. Problem is that inheritreverts to the parent property, but *is the root, so it has nothing to revert to. Same goes for initial!

所以有人会假设我们可以那样回去——添加一个* { background-color: inherit }. 问题是inherit恢复到父属性，但*它是根，所以它没有什么可恢复的。同样适用initial！

Maybe!

也许！

So we're left with 4 options, none of them is what you where hoping for, but it is what it is. In order of difficulty:

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

1. Download the BS (less or sass) source, edit the offending code, and then compile it. (You need to use a local copy, CDN's will not work.)
2. Download the CSS variant of your choice, search and delete the offending code. (No CDN's again.)
3. Use getbootstrap.com/customizeto create a new variant - exclude "Print media styles" under "Common CSS". (Again, no CDN's)
4. Override the specific items who's color you want to print: e.g.

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's copies of BS will now work, but then you have the problem of the user possibly not printing backgrounds and having the output white (yellow in the e.g.) on white!

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

Finally

最后

Well I hope learning the why's was at the very least a way of you thinking of a workaround. General rule of thumb I follow is that when printing, the background is (should be) always white. When constrained that way you start thinking of novel ideas, like exclamation icons around the text that only "print" (@media only screen { .hidden-screen { display: none; }})

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

回答by The Aelfinn

Despite !importantusage being generally frowned upon, this is the offending code in bootstrap.css

尽管!important普遍不赞成使用，但这是有问题的代码bootstrap.css

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

Let's assume you are trying to style the following HTML:

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

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

To override this CSS, place the following (more specific) rule in your stylesheet:

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

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

This works because the rule is more specific than the bootstrap default.

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

回答by J Singh

@Vino explained really well. I was also facing problem because bootstrap.css makes background transparent forcefully. Thus I have customized the specific element in my custom CSS file. Remember to change <.element> with element where you want the colorful background instead of transparent.

@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*/
  }
 } 

回答by odedta

You can get this working by removing those lines from bootstrap.cssfile, there might be a jquery solution to this but it is much more complicated than erasing a few lines. :/

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

Or you could use a plugin called html2canvas as presented in this jsfiddle

或者你可以使用一个叫做 html2canvas 的插件，如这个jsfiddle 中所示

回答by Davies-Barnard

I ended up here with the same problem but found the Chrome comes with a show background graphics option on the print dialog under more settings that did exactly that! No modification of Bootstrap (4) required.

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

回答by ihsan

i had also face the same problem.. i just remove the bootstrap.min.css from my code then it work for me.

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

回答by Wesly Backers

just make the specificity-value more specific and you should be ok. something like:

只需使特异性值更具体，你应该没问题。就像是：

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