我试图为我们的应用程序制作一个可打印的样式表,但我在@media打印的背景颜色有问题。

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

其他一切工作,我可以修改边界和这样,但背景色不会通过打印。我知道,如果没有更多细节,你们可能无法回答我的问题。我只是好奇是否有人有这个问题,或类似的,以前。


当前回答

对于chrome,我已经使用了这样的东西,它为我工作。

在body标签中,

<body style="-webkit-print-color-adjust: exact;"> </body>

或者对于一个特定的元素,假设你有一个表格你想要填充一个td,也就是一个单元格,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

其他回答

-webkit-print-color-adjust:准确;仅仅是不够的 必须在属性中使用!important

这是打印预览后,我添加!重要的每个背景颜色和颜色属性在每个标签

这是在添加之前在chrome上打印预览

现在,要知道如何注入!对div的风格很重要,看看这个答案,我无法注入一个“!”重要”规则

如果你想创建“打印机友好”的页面,我建议添加“!”对你的@media打印CSS很重要。这会鼓励大多数浏览器打印你的背景图片、颜色等。

例子:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

我想我应该从最近的打印css经验中添加一个最近和2015年的相关帮助。

无论打印对话框设置如何,都能够打印背景和颜色。

为了做到这一点,我必须使用!important & -webkit-print-color-adjust:exact !important的组合来正确地打印背景和颜色。

此外,在声明颜色时,我发现最顽固的地方需要直接定义目标。例如:

<div class="foo">
 <p class="red">Some text</p>
</div>

和你的CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

尽管!的重要用法通常不受欢迎,但这是bootstrap.css中令人讨厌的代码,它阻止表行以背景色打印。

.table td,
.table th {
    background-color: #fff !important;
}

让我们假设你正在尝试为下面的HTML设置样式:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

要覆盖这个CSS,在你的样式表中放置以下(更具体的)规则:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

这是因为该规则比引导默认值更具体。

如果你不介意使用图片而不是背景色(或者可能是带有你背景色的图片),下面的解决方案对我来说在FireFox、Chrome甚至IE中都有效,没有任何覆盖。将图像设置在页面的某个位置,并隐藏它,直到用户打印。

页面上带有背景图像的html

<img src="someImage.png" class="background-print-img">

Css

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}