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

I have some simple CSS:

我有一些简单的CSS：

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

It looks ok in the browser, but when I go to print it in Firefox it comes out as black text on a white background. I imagine this is some sort of ink-saving feature, but is there any way around it?

它在浏览器中看起来不错，但是当我在Firefox中打印它时，它在白色背景上显示为黑色文本。我想这是一种节省墨水的功能，但有什么方法吗？

5 个解决方案

#1

Its a browser setting. There is nothing you can do in your CSS. In Windows - File > Page Setup... > Print Background.

它是一个浏览器设置。您无法在CSS中执行任何操作。在Windows - 文件>页面设置...>打印背景。

#2

I found a solution, it's a bit hacky, but with CSS pseudo elements you can create backgrounds using fat borders. Borders are printed even when "printing backgrounds" is off, just make them really thick! One note, Firefox sets all white font colors to black, so when you create a fake black background, Firefox still makes the text black, rendering the text invisible. Anyway here it is:

我找到了一个解决方案，它有点hacky，但使用CSS伪元素，你可以使用胖边框创建背景。即使“打印背景”关闭，边框也会打印出来，只需要让它们真的很厚！一个注意事项，Firefox将所有白色字体颜色设置为黑色，因此当您创建假黑色背景时，Firefox仍会使文本变黑，使文本不可见。无论如何它在这里是：

The HTML:

HTML：

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

The css:

css：

.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;
  }
}

#3

There is a simple solution for this.

有一个简单的解决方案。

For background-color, instead of using:

对于背景颜色，而不是使用：

background-color: red

Use:

使用：

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*/

---

Also for color, instead of:

也用于颜色，而不是：

color: grey;

Use:

使用：

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

---

You may restrict them to print only by using @media print, but you do not have to!

您可以限制它们仅使用@media打印进行打印，但您不必这样做！

---

Note: Sometimes you should use background-color: transparent; or color: transparent; if the color or background-color are inherited from parent elements.

#4

This is how I made it to work in my case by adding the below two lines to the particular div. "@@supports (-moz-appearance:meterbar)" is helpful to add styles specific to Firefox.

这就是我通过在特定div中添加以下两行来使其在我的情况下工作的方式。 “@@ supports（-moz-appearance：meterbar）”有助于添加特定于Firefox的样式。

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

-webkit-print-color-adjust：exact;颜色调整：准确;

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

#5

Maybe not the answer you're looking for, but here goes:

也许不是你想要的答案，但这里有：

I'd rather add a separate stylesheet for printing the page. Typically, you would want to remove things like navigation menus, breadcrumbs, ads, and maybe do some small changes in margins, paddings, borders and fonts compared to the on-screen stylesheet.

我宁愿添加一个单独的样式表来打印页面。通常，您需要删除导航菜单，面包屑，广告等内容，并且可能会在屏幕样式表上对边距，填充，边框和字体进行一些小的更改。

Even thinking about forcing the user to fill a whole page with black ink with white text seems silly to me.

甚至考虑强迫用户使用带有白色文本的黑色墨水填充整个页面对我来说似乎很愚蠢。

To add a separate print stylesheet, add another stylesheet to the head of your page.

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

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