Question

我有一些简单的CSS：

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

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

Answer 1

它是一个浏览器设置。您无法在CSS中执行任何操作。在Windows中 - File > Page Setup... > Print Background。

Answer 2

我找到了一个解决方案，它有点hacky，但使用CSS伪元素你可以使用胖边框创建背景。即使在＆＃34;印刷背景＆＃34;关闭，只是让他们真的很厚！需要注意的是，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;
  }
}

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进行打印，但您不必使用！

<小时/> 注意：如果background-color: transparent;或color: transparent;从父元素继承，则有时您应该使用color或background-color。

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

-webkit-print-color-adjust:exact;

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

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

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

Answer 8

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

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

即使考虑强迫用户使用带有白色文字的黑色墨水填充整个页面，对我来说也是愚蠢的。

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

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

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

8 个答案: