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

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

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


当前回答

我发现的最佳“解决方案”是提供一个突出的“打印”按钮或链接,弹出一个小对话框,大胆、简要、简洁地解释他们需要调整打印机设置(使用ABC 123项目符号指令),以启用背景和图像打印。这对我来说非常成功。

其他回答

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

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

试试这个,它为我谷歌Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

你可以使用标签画布并“绘制”背景,这在IE9、Gecko和Webkit上都可以使用。

身体{ 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…

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

例子:

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