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

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

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


当前回答

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

例如:

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

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

其他回答

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

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

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

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

明白了:

CSS:

box-shadow: inset 0 0 0 1000px gold;

适用于所有盒子——包括表格单元格!!

(如果pdf打印机的输出文件是可信的…?) 只在Ubuntu上的Chrome + Firefox中测试…

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

例子:

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

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

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

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

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

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