在引导程序中打印页面时如何打印颜色？答案

【问题标题】：How can I print colors when printing a page in bootstrap?在引导程序中打印页面时如何打印颜色？
【发布时间】：2014-03-19 22:42:39
【问题描述】：

我正在尝试在我的 asp.net 网站上打印带有颜色的页面。但是所有的颜色都是白色的。然而，我的 Highcharts 颜色和图像是彩色的。我正在使用 Bootstrap 3，不确定这是否会影响任何内容，并且我还选中了打印背景颜色的框。有谁知道为什么我的颜色没有打印出来？

【问题讨论】：

标签： asp.net vb.net twitter-bootstrap printing colors

【解决方案1】：

您可以在您的 CSS 中使用类似这样的内容将 Bootstrap 的设置覆盖为“继承”（记住在 Bootstrap 之后包含您的 CSS ）：

@media print {
    * {
        color: inherit !important;
        background: inherit !important;
    }
}

【讨论】：

【解决方案2】：

发布问题后不久就找到了解决方案。 bootstrap.css 中的以下行需要更改。

@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}

出于我的目的，我删除了 color: 和 background: 属性。

【讨论】：

更好的解决方案是以某种方式覆盖它。我只是不知道该怎么做。
尝试检查您的浏览器是否在打印设置中打开了背景颜色

【解决方案3】：

@media print
{
    /* color:#000!important; */    
    text-shadow:none!important;
    /*  background:transparent!important; */
    box-shadow:none!important
 }

您可以从 bootstrap.min.css 或 bootstrap.css 中删除（或注释掉）颜色和背景样式 @media print，无论您在您的网站（母版页）中引用了什么...

它对我有用！它将以其颜色格式打印网页。

【讨论】：

【解决方案4】：

我认为@Jonathan 的解决方案是正确的，虽然不适合我。

正如@pixelearth 在 cmets 中所说，最好的解决方案可能是覆盖来自 Bootstrap CSS 的 @media print。但在这种情况下，您不能使用inherit 选项。

在我的例子中，如果我设置两个属性 color 和 background，就像它们在页面 CSS 中设置的那样，覆盖 @media print 效果很好。

如果您想覆盖 Bootstrap 的 @media print CSS，您必须在 Bootstrap 的 CSS（是否缩小）之后包含一个新的 CSS 文件。

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/printable-page.css" rel="stylesheet">

这是我的printable-page.css CSS 文件的内容：

@media print {
    *,
    *:before,
    *:after {
        color: #b01717 !important;
        background: transparent !important;
    }
}

正如我所说，color: #b01717 和 background: transparent 两个值来自网站的主要 CSS（来自 body 或 page 部分）。

也许这对某人来说可能是一个有限的解决方案，但在我的情况下，“可打印”页面的样式非常简单，我也可以避免编辑 bootstrap.css 文件。

【讨论】：