如何让Firefox打印背景颜色样式？

Question

我有一些简单的CSS：

#someElement {
    background-color:black;
    color:white;
}

在浏览器中看起来没问题，但是当我在Firefox中打印时，它会以黑色文字和白色背景的形式出现。 我想这可能是一种节省墨水的特性，但是有没有什么办法可以解决这个问题？

- machineghost

---

我建议应该接受@musa的答案，而不是当前的答案，因为它确实解决了问题。 - Namatullah Shahbazi

嗯... Timing的答案比mursa早了将近两年，而且两个答案都使用了相同的基本原理（即使用除了“background-color”以外的东西来伪造背景颜色）。Timing的答案有更多的解释，但mursa的更简单...我希望其中一个明显更好，但考虑到所有这些，我真的不确定应该接受哪一个。目前，我只是从Daniel A. White的答案中删除了勾选标记（虽然它在技术上是准确的，但SO上的人们正在寻找解决方案）。 - machineghost

Firefox现在将识别color-adjust属性。'color-adjust: exact';下面有一个答案提到了应该选择哪个作为正确答案。 - RustyToms

Answer 1

这是一个浏览器设置。在CSS中您无法做任何事情。在Windows上 - 文件 > 页面设置... > 打印背景。

- Daniel A. White

---

有没有一种方法可以使用JavaScript检测此设置是否打开或关闭？ - jdavis

@jdavis 不，我不这么认为。 - Daniel A. White

现在直接在“打印”中... -> “选项”（选项卡）->“打印背景颜色”。我认为这比Musa或timing建议的更普遍，因为它也可以应用于您无法编辑的网页（您不是其所有者）。 - Michal Skop

有没有办法在使用 onload="window.print(); 时设置这个呢？因为浏览器设置只在使用浏览器的“打印”按钮时起作用。 - Naxos84

@Naxos84 我不这么认为。那都是由浏览器控制的。 - Daniel A. White

Answer 2

我找到了一个解决方案，它有点巧妙，但是通过使用CSS伪元素，您可以使用粗边框创建背景。即使“打印背景”已关闭，边框也会被打印出来，只需将它们设置得非常厚！请注意，Firefox会将所有白色字体颜色设置为黑色，因此当您创建一个假的黑色背景时，Firefox仍然会使文本变黑，从而呈现看不见的文本。无论如何，这就是方法：

HTML 代码：

<div class="redBox">
  <div class="content">Black on red</div>
</div>

样式表：

.redBox {
  /* o no, does not work with print */
  background-color: red;
}

@media print {
  .redBox {
     position: relative;
     overflow: hidden; /* this might not work well in all situations */
  }
  .redBox:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     /* and here it is, the background color */
     border: 99999px red solid;
     z-index: 0; /* was required in my situation */
  }
  .redBox * {
    /* was required in my situation */
    position: relative;
    z-index: 1;
  }
}

- timing

---

如果您将z-index: -1设置为0，则可以省略.redBox *部分。 - kernel

@kernel 那对我有效，但我认为你还需要将.redbox的背景设置为透明，以便打印。 - Blazemonger

我知道这是一个旧答案，但尝试使用9999cm而不是px。（我进行了实验，这是唯一有效的单位。10000cm不起作用。） - Ismael Miguel

经过一些测试，我发现绝对最大值（我花了时间去找）是5585.70776367in（~`14299.4118749952cm`）。您可以在http://jsfiddle.net/67k4Lvn9/2/上尝试。至少在Google Chrome 42.0.2311.135和Firefox 37.0.2上有效。 - Ismael Miguel

@timing 虽然你的方法可行并且“background”被打印出来了，但是div的内容没有显示出来。我尝试使用z-index，但仍然不可见。虽然在屏幕上显示。 - John Demetriou

Answer 3

有一个简单的解决方案。

对于background-color，不要使用：

background-color: red

使用：

background-color: unset;
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
                                     number that is definitely 
                                     larger than the box dimension*/

---

对于color，建议使用以下语法：

color: grey;

使用：

color: unset;
text-shadow: 0 0 grey;

---

您可以通过使用@media print将它们限制为仅打印，但您并不一定需要这样做！

---

注意: 如果color或background-color是继承自父元素的，则有时应该使用background-color: transparent;或color: transparent;。

- Musa Haidari

---

可能不适用于所有浏览器，但可以修复火狐文本颜色。 - Poelinca Dorin

适用于背景，不要忘记在样式定义中的 box-shadow 后面添加 :。 - userlond

@userlond 谢谢你的修复。 - Musa Haidari

我喜欢这个纯CSS的解决方案，因为它不需要我修改DOM。 - leemes

请注意，此功能目前在Chrome浏览器中无法正常工作（阴影框被打印为纯黑色）。 - roflmyeggo

目前在Chrome中，您可以通过使用“-web-filter: opacity(1)”来解决此问题，但这将导致一些像素化。 - roflmyeggo

Answer 4

在Firefox和IE中显示背景颜色

@media print {
  body{
    -webkit-print-color-adjust: exact; /*chrome & webkit browsers*/
    color-adjust: exact; /*firefox & IE */
  } 
}

- DhineshYes

Answer 5

以下是我如何在我的情况下通过向特定的div添加以下两行代码来使其工作。 "@@supports (-moz-appearance:meterbar)"有助于添加针对Firefox的特定样式。

-webkit-print-color-adjust: exact; color-adjust: exact;

@@supports (-moz-appearance:meterbar) {
    .container {
        margin: 0;
        font-size: 0.85em;
        width: 100%;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

- Ricky Boy

---

这是Firefox的一个新功能，现在这就是正确答案。使用color-adjust属性。 - RustyToms

Answer 6

对于 Chrome 浏览器，您可以使用以下方法：

-webkit-print-color-adjust:exact;

在打印预览中，勾选更多设置->背景图形

对于Firefox浏览器，无法使用任何CSS启用它。您可以按照以下步骤启用它（如果您没有看到文件，请按一次Alt键）。

文件->页面设置，勾选打印背景（颜色和图像）

- Saadat

Answer 7

我通过使用SVG元素来实现了这个黑客技巧。

.legendItem {
  position: relative;
}

.legentItemText {
  position: relative;
  z-index: 1;
}

.printBackground {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
}

  <div class="legendItem">
    <div class="legentItemText">Some text.....<div>
  <svg class="printBackground">
    <rect width="100%" height="100%" fill="#000" />
  </svg>
</div>

- Kirill

Answer 8

也许不是你要找的答案，但这里有一个：

我宁愿为打印页面添加单独的样式表。通常情况下，您会希望删除诸如导航菜单、面包屑、广告等内容，并且可能需要对边距、填充、边框和字体进行一些小的更改，与屏幕上的样式表相比。

甚至考虑强制用户使用黑色墨水和白色文字填满整个页面，这对我来说也显得很傻。

要添加单独的打印样式表，请在页面头部添加另一个样式表。

<link rel="stylesheet" href="print.css" type="text/css" media="print">

- Arve Systad

---

呵呵，整个页面有点过分了；我只需要一个小区域。 - machineghost

这可能是真的，但请记住它是完全相同的机制来控制它。如果浏览器检测到网站中的表面积，请在某个地方检查所需的DPI设置以进行打印，然后决定是否应用BG颜色？;-) - Arve Systad

这如何解决通用背景色问题？ - Ben Sewards