Question

在Firefox中，当我按Ctrl + p在Thumb中打印内容Red Color图标，在Thumb中打印出来的Black Color图标时，请您帮帮我吗？

@media print {
  body {
    -webkit-print-color-adjust: exact;
  }
}

.inner {
  position: relative;
  z-index: 2;
}

#wrap:after {
  content: "\f087";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  position: absolute;
  font-size: 40px;
  color: #ff2d00;
  z-index: 1;
}

<HTML>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="wrap">
    <div class="inner">
    </div>
  </div>
</body>

</HTML>

Answer 1

我没有要进行彩色打印的测试，但基于规格。您可以尝试更改为此吗？

@media print { * { -webkit-print-color-adjust: exact; printer-colors: exact !important; color-adjust: exact !important; } }

参考：https://wiki.csswg.org/ideas/print-backgrounds

支持：Chrome，Firefox，Safari

Answer 2

谢谢，我找到了它的解决方案，实际上，如果我们不设置这些代码，实际上我们需要在Firefox的“页面设置”中进行配置，仅勾选“打印背景（颜色和图像）”事件。

@media print {
    * {
       -webkit-print-color-adjust: exact;
        printer-colors: exact !important;
        color-adjust: exact !important;
    }
}

Answer 3

我认为您应该将！important标记为每个css值。例如：颜色：＃ff2d00！important; 因为我们担心其他样式已经将其定义为引导程序。

当我们按Ctrl + P时，CSS的内容颜色在Firefox打印机上不起作用

3 个答案: