引导打印CSS去除背景色

Question

当我使用引导程序时，它会在尝试打印页面时从所有内容中消除背景色。我网站上的几乎所有东西都使用bootstrap类，因此我想避免在bootstrap外使用大量手动CSS。我发现引导程序用于@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时，我希望打印警告警报，因为它显示在屏幕上，因此将其打印为红色框。

Answer 1

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

为什么？

Bootstrap确实使用@media print { * { color: $fff; background: transparent; }}-，但这是有充分理由的。这段代码实际上是从normalizer.css项目派生的（当时是@mdo的学院，@
necolas）–目的是使所有浏览器的行为相同。这些人出于非常充分的理由选择对CSS进行“标准化”：

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

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

请记住，Bootstrap也是一个“框架”-如果您愿意的话，也是一个起点-
并对@mdo和@necolas表示敬意，因为他们具有远见卓识，可以建立可预测的基准。 （不，我不认识他们。）

不…

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

因此，有人会假设我们可以回去—添加一个* { background-color: inherit }。问题是inherit还原到父属性，但*它是根，因此没有任何要还原的属性。一样initial！

也许！

因此，我们剩下4个选项，它们都不是您所希望的，但事实就是如此。按难度顺序：

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

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

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

最后

好吧，我希望至少知道为什么会这样，这是您思考变通办法的一种方式。我遵循的一般经验法则是，在打印时，背景总是（应该是）白色。受到这种限制后，您便开始思考新颖的想法，例如仅“打印”（@mediaonly screen { .hidden-screen { display: none; }}）的文字周围的感叹号图标