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

问题描述

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

theme-united.css / p>

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

有没有办法确保在打印时不删除背景颜色，文件？

例如：
当我使用.alert-danger时，我希望在屏幕上显示警告危险，一个红色框。

查看JSFiddle：
http://jsfiddle.net / 7mtk7wrh /

解决方案

不幸的是，您的问题没有很好的答案，

这是真的，为什么？ Bootstrap使用 @media print {* {color：$ fff;背景：透明; }} - 但有一个非常坚实的理由。这一段代码实际上来自 normalizer.css 项目（由当时的@mdo学院的@necolas ） - 它的意图是使所有浏览器的行为相同。这些人选择规范化CSS的一个很好的理由：

对于大多数浏览器，可以选择包括或排除背景颜色，所以行为不是标准的甚至是同一个浏览器。想象一下，一个非常黑暗的背景与白色文本的网站 - 当打印背景关闭时，它看起来像你没有打印 - 实际上你在白色背景上打印白色文本。

没有办法解释颜色的所有不同用途，所以他们选择去黑色（字体）和白色（背景，实际上透明）。即使是黑色的选择是很好的想法 - 它更好的打印解决方案，因为大多数彩色打印机有更多的黑色墨水/墨粉（更经济），他们不需要混合颜色，使黑色（这么快）。

请记住，Bootstrap也是一个框架 - 所以一个起点，如果你愿意 - 并感谢@mdo和@necolas有远见想到这一点建立可预测基线的条件。 （不，我不认识他们。）

不是...
$ b

所以这里的想法是：如果我们可以'回去'并且取消这个设置，不幸的是CSS不能像这样工作 - 是的浏览器加载CSS声明在一个队列声明wins（LIFO或者last-in-first-out），但是我不知道有一个方法来删除这个堆栈，所以CSS开发人员只是添加更多的结束...

因此，我们可以假设我们可以回到这种方式---添加一个 * {background-color：inherit} 问题是 inherit 恢复到父属性，但 * 是根，因此没有任何内容可以恢复。 $ c>初始！

可能！ >

$ b $
b
1. 下载BS（less或sass）源代码，编辑有问题的代码，然后编译它。 （您需要使用本地副本，CDN将无法工作。）


2. 下载您选择的CSS变体，搜索并删除违规代码。 （没有CDN。）


3. 使用 getbootstrap.com/customize 创建新的变体 - 排除常见CSS下的打印媒体样式。

pre> @media print {
.alert-danger {
color：yellow！important;
background-color：red！important;
}
}


CDN的BS副本现在可以正常工作，具有用户可能不打印背景并且在白色上输出白色（黄色在白色）的问题。





最后 >



我希望学习为什么至少是一个想法的解决方法。一般的经验法则我跟着是，当打印时，背景是（应该）总是白色的。当约束这种方式，你开始思考新颖的想法，如感叹号图标周围的文字只有打印（ @media only屏幕{.hidden-screen {display：none;}} ）




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;

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

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.

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

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

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

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

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!

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:

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'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!

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

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