Bootstrap 打印 CSS 删除背景颜色 [英] Bootstrap print CSS removes background color

问题描述

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

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 print to remove the background color. I'm using a bootstrap theme as well (theme united) which is removing the background color as well.

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;

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

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

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

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.

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

推荐答案

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

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.

为什么?

Bootstrap 确实使用了 @media print { * { color: $fff;背景:透明；}} -- 但有一个非常可靠的理由.这段代码实际上源自 normalizer.css 项目(由当时的 @mdo 学院 @necolas) - 它的目的是使所有浏览器的行为都相同.这些家伙选择规范化"css 是有充分理由的:

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.css project (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:

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

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).

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

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.)

不...

所以这里的想法是:如果我们可以‘返回’并取消设置怎么办.不幸的是，CSS 不能那样工作 - 是的，浏览器将 CSS 声明加载到最后一个声明获胜的队列"中(LIFO，或后进先出)，但我不知道删除此堆栈的方法.因此 CSS 开发人员只需在最后添加更多...

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...

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

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

也许吧！

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

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:

1. 下载 BS(less 或 sass)源代码，编辑有问题的代码，然后编译它.(您需要使用本地副本，CDN 将不起作用.)
2. 下载您选择的 CSS 变体，搜索并删除有问题的代码.(再次没有 CDN.)
3. 使用 getbootstrap.com/customize 创建新变体 - 排除通用 CSS"下的打印媒体样式".(同样，没有 CDN)
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/customize to 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.

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

CDN 的 BS 副本现在可以使用了，但是您遇到的问题是用户可能无法打印背景，并且输出为白色(例如黄色)！

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!

终于

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

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

这篇关于Bootstrap 打印 CSS 删除背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！