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

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

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


当前回答

发现这个问题,因为我在谷歌应用程序脚本中从html输出生成PDF时遇到了类似的问题,其中背景颜色也没有“打印”。

-webkit-print-color-adjust:准确;重要的解决方案当然没有工作,但是盒子阴影:插入000 1000px黄金;做了……很棒的hack,非常感谢你:)

其他回答

我想我应该从最近的打印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 */

我只是在打印媒体查询中添加了这个片段,所有的样式都按预期应用:

       * {
        color-adjust: exact!important;  
        -webkit-print-color-adjust: exact!important; 
         print-color-adjust: exact!important;
      }

身体{ background - color: # E5FFE5; } .bg_print { border-bottom: 30px solid #FFCC33; } .orange_bg_print_content { margin-top: -25 px; 填充:0 10px; } < div class = " bg_print”> < / div > < div class = " orange_bg_print_content”> 我的内容与背景! < / div >

测试和工作在Chrome和Firefox和Edge…

如果用户在打印设置中关闭了“打印背景颜色和图像”,没有CSS会覆盖它,所以一定要考虑到这一点。这是默认设置。

一旦设置好,它就会打印背景颜色和图像,你所拥有的就可以工作了。

它在不同的地方被发现。 在IE9beta中,它可以在打印->页选项下的纸张选项中找到

在FireFox中,它在页面设置->[格式和选项]选项卡下的选项。

启用Chrome后台打印:

body {
  -webkit-print-color-adjust: exact !important;
}

编辑: Chrome、Safari和Firefox浏览器:

body{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}