CSS @media打印问题与背景颜色;

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

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

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

当前回答

如果你不介意使用图片而不是背景色(或者可能是带有你背景色的图片)，下面的解决方案对我来说在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;
    }

}

2015-02-10 16:26:48

其他回答

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

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

2016-04-13 20:18:16

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

2012-07-31 18:15:56

不要在打印样式表中设置背景颜色。只要在正常的css文件中设置属性，它就可以正常工作:)

签出这个例子:带有页眉和页脚的终极打印HTML模板

演示:带页眉和页脚的终极打印HTML模板演示

2019-07-30 10:44:21