Bootstrap 打印 CSS 去除背景色

Question

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

主题-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 文件的情况下打印时不删除背景色？

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

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

原文由 user936965 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

为什么？

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

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

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

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

没有…

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

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

可能是！

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

1. 下载 BS（less 或 sass）源代码，编辑有问题的代码，然后编译它。 （您需要使用本地副本，CDN 将不起作用。）
2. 下载您选择的 CSS 变体，搜索并删除有问题的代码。 （又没有 CDN。）
3. 使用 getbootstrap.com/customize 创建一个新变体 - 排除“Common CSS”下的“Print media styles”。 （同样，没有 CDN）
4. 覆盖要打印颜色的特定项目：例如

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

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

最后

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

原文由 user1575941 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

这是可行的，因为该规则比引导程序默认值更具体。

原文由 The Aelfinn 发布，翻译遵循 CC BY-SA 3.0 许可协议