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

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

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

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

当前回答

-webkit-print-color-adjust:准确;仅仅是不够的必须在属性中使用!important

这是打印预览后，我添加!重要的每个背景颜色和颜色属性在每个标签

这是在添加之前在chrome上打印预览

现在，要知道如何注入!对div的风格很重要，看看这个答案，我无法注入一个“!”重要”规则

2016-10-17 13:35:24

其他回答

尽管!的重要用法通常不受欢迎，但这是bootstrap.css中令人讨厌的代码，它阻止表行以背景色打印。

.table td,
.table th {
    background-color: #fff !important;
}

让我们假设你正在尝试为下面的HTML设置样式:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

要覆盖这个CSS，在你的样式表中放置以下(更具体的)规则:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

这是因为该规则比引导默认值更具体。

2018-04-28 16:11:31

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

例如:

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

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

2013-03-27 12:37:22

对于chrome，我已经使用了这样的东西，它为我工作。

在body标签中，

<body style="-webkit-print-color-adjust: exact;"> </body>

或者对于一个特定的元素，假设你有一个表格你想要填充一个td，也就是一个单元格，

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

2016-08-21 07:18:41

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

2012-07-31 18:15:56