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

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

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


当前回答

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

其他回答

对于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: exact;
}

此外,启用>模拟CSS媒体从>检查>更多的工具>渲染。非常详细的步骤可以在这里找到。

启用Chrome后台打印:

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

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

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

在某些情况下(没有任何内容,但有背景的块),可以使用边框单独覆盖每个块。

例如:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

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

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