Question

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

Answer 1

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

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

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

Answer 2

您可以在CSS中将Bootstrap的设置重写为“继承”类似的东西（记得在 Bootstrap之后包含CSS ）：

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

Answer 3

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

您可以删除（或注释掉）颜色＆amp; bootstrap.min.css或bootstrap.css中的背景样式@media print，无论您在网站中引用哪个（母版页）......

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

Answer 4

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

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

就我而言，如果我在页面CSS中设置了两个属性@media print和color，则覆盖background可以正常工作。

如果要覆盖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文件。

在bootstrap中打印页面时如何打印颜色？

4 个答案: