Bootstrap 打印 CSS 移除背景颜色

Posted 2023-03-06

【中文标题】Bootstrap 打印 CSS 移除背景颜色

【英文标题】：Bootstrap print CSS removes background color

【发布时间】：2016-01-29 09:18:20

【问题描述】：

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

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

【问题讨论】：

参考栈溢出问题***.com/questions/14987496/…

您现在要设置哪种颜色作为背景，它会显示黑色对吗？

@AkashK.：我当然想到了这一点，但到目前为止都没有。我不想将每种引导颜色都添加到我自己的 CSS 中以覆盖引导打印样式。

@Mithun：我已经尝试过该解决方案，但颜色仍然被引导程序覆盖。

@Mitul：我想使用原始引导类的颜色（例如；当我使用 .alert-danger 时，我想看到一个红色框）

【参考方案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 个选项，它们都不是您所希望的，但它就是这样。按难度排序：

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

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

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

终于

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

【讨论】：

我想保持背景图片不是颜色，所以这个解决方案不起作用。

很好的解释。最终在没有 Bootstrap 的情况下创建了一个用于打印目的的新视图...

【参考方案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;
    

之所以有效，是因为该规则比引导默认值更具体。

【参考方案3】：

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

或者，您可以使用jsfiddle 中介绍的名为 html2canvas 的插件

【讨论】：

试过这个，但这是将颜色重置为原始值。问题是，例如，我使用 .alert-danger 创建一个带有红色背景的框，我希望该红色框也打印为红色框。所以我需要引导 CSS 来添加背景颜色，我只是不需要打印部分。

然后尝试将其更改为初始值。 CSS 首字母将转到该框的 bootstrap.css 设置并忽略之前设置的规则。如果它不起作用，您介意发送链接或在 jsfiddle 中重新创建问题吗？ :)

也不工作。这是将颜色设置为默认值：w3schools.com/cs-s-ref/css_initial.asp。继承不起作用，因为 css 中有 !important 透明背景颜色，因此忽略了真实颜色。

只是从 bootstrap.css 中删除这些规则，这不像您每天都在更新 bootstrap...我仍然认为可以在不摆弄 bootstrap.css 的情况下解决这个问题，您能重新创建问题吗请在 jsfiddle 中？

我已经在 m 问题中添加了 JSFiddle，您的示例已经在其中。我不会每天更新引导程序，非常正确。但我知道我会忘记删除这些行，我认为引导程序删除背景颜色很愚蠢，所以我无法忍受我应该编辑引导程序 CSS 并且没有解决方法。

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

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

【讨论】：

一旦你有足够的reputation，你就可以改为comment on any post;，provide answers that don't require clarification from the asker。

【参考方案7】：

只要让特异性值更具体，你应该没问题。 类似：

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

【参考方案8】：

其实是有解决办法的，但这仍然是一个 hack。 它被用于 puppeteer 中的 pdf 生成，因此仅在这种情况下进行了测试，但很可能应该适用于所有现代浏览器。 请记住，不同版本的 Bootstrap 中的 BOOTSTRAP_PRINT_RULE 可能不同。

const BOOTSTRAP_PRINT_RULE = `@media print 
  *, ::after, ::before  color: rgb(0, 0, 0) !important; text-shadow: none !important; background: 0px 0px !important; box-shadow: none !important; 
  a, a:visited  text-decoration: underline; 
  a[href]::after  content: " (" attr(href) ")"; 
  abbr[title]::after  content: " (" attr(title) ")"; 
  a[href^="javascript:"]::after, a[href^="#"]::after  content: ""; 
  blockquote, pre  border: 1px solid rgb(153, 153, 153); break-inside: avoid; 
  thead  display: table-header-group; 
  img, tr  break-inside: avoid; 
  img  max-width: 100% !important; 
  h2, h3, p  orphans: 3; widows: 3; 
  h2, h3  break-after: avoid; 
  .navbar  display: none; 
  .btn > .caret, .dropup > .btn > .caret  border-top-color: rgb(0, 0, 0) !important; 
  .label  border: 1px solid rgb(0, 0, 0); 
  .table  border-collapse: collapse !important; 
  .table td, .table th  background-color: rgb(255, 255, 255) !important; 
  .table-bordered td, .table-bordered th  border: 1px solid rgb(221, 221, 221) !important; 
`

for (const styleSheet of document.styleSheets) 
    for (const [index, rule] of Array.from(styleSheet.cssRules).entries()) 
        if (rule.cssText && rule.cssText.includes(BOOTSTRAP_PRINT_RULE)) 
            styleSheet.deleteRule(index)
            return;
        
    

【讨论】：

@M-Chen-3 这是一种黑魔法……说真的，我们只是从浏览器的 DOM 中删除了这个确切的规则。我们遍历所有已加载的样式表并尝试找到一个规则我们需要删除。找到规则后，我们将其删除。它更新 CSS 规则列表并触发重新渲染。将其视为删除 元素但用于样式规则

【参考方案9】：

从带有 SASS 的 Bootstrap 第 4 版开始，您实际上可以将以下变量设置为 false，这将改变这种行为：

$enable-print-styles: false

如果这不是一个选项，下面的脚本会从 CSS 中粗暴地删除所有 @media print 注释。它假定 Bootstrap 是第一个加载的样式表，并且它在 Bootstrap 加载之后运行。

var style = document.styleSheets[0];

[].forEach.call(style.cssRules || [], function (aRule, aIndex) 
   if (aRule.cssText.indexOf("@media print") >= 0) 
      style.deleteRule(aIndex);
   
);