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

Question

我有一些简单的CSS:

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

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

Answer 1

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

Answer 2

我找到了一个解决方案,它有点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;
  }
}

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中添加以下两行来使其在我的情况下工作的方式."@@ supports(-moz-appearance:meterbar)"有助于添加特定于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 */
  } 
}