35

我有一些简单的 CSS：

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

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

4

8 回答 8

45

它是一个浏览器设置。在 CSS 中您无能为力。在 Windows 中 - File > Page Setup... > Print Background.

于 2009-04-19T00:06:32.707 回答
30

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

的HTML：

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

的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;
  }
}
于 2014-03-25T10:59:46.783 回答
24

有一个简单的解决方案。

对于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，但您不必这样做！

注意：有时您应该使用background-color: transparent;orcolor: transparent;如果colororbackground-color是从父元素继承的。

于 2015-12-20T09:43:07.547 回答
20

这就是我通过将以下两行添加到特定 div 来使其在我的情况下工作的方式。"@@supports (-moz-appearance:meterbar)" 有助于添加特定于 Firefox 的样式。

-webkit-print-color-adjust：精确；颜色调整：精确；

@@supports (-moz-appearance:meterbar) {
    .container {
        margin: 0;
        font-size: 0.85em;
        width: 100%;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}
于 2017-04-13T19:03:40.457 回答
19

用于在 Firefox 和 IE 中显示背景颜色

@media print {
  body{
    -webkit-print-color-adjust: exact; /*chrome & webkit browsers*/
    color-adjust: exact; /*firefox & IE */
  } 
}
于 2019-06-14T00:46:18.917 回答
2

对于铬，你可以使用这个：

-webkit-print-color-adjust:exact;

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

对于 Firefox，您无法使用任何 CSS 启用它。您可以按如下方式启用它（如果看不到文件，请按 Alt 键一次）。

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

于 2019-01-07T06:56:58.713 回答
1

我已经通过使用 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>

于 2018-09-24T16:02:36.410 回答
-1

也许不是您正在寻找的答案，但这里有：

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

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

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

<link rel="stylesheet" href="print.css" type="text/css" media="print">
于 2009-04-19T01:23:11.757 回答