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

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

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

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

当前回答

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

2015-09-30 04:23:10

其他回答

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

2012-07-31 18:15:56

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

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

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

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

2010-10-08 20:17:56

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

启用Chrome后台打印:

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

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

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

2013-02-09 03:34:37