Question

我的背景颜色甚至是我的元素的字体颜色在打印时突然变白。这是一个示例标记：

<div id="ActionPanel">
    <input type="button" onclick="javascript:window.print();" value="Print"> 
</div>

<p id="P1">
   Hello World! 
</p>

<p id="P2">
   Hello Web! 
</p>

<p id="P3">
   Hello StackOverflow 
</p>

这是CSS

@media all 
{
   body
   {
       background-color:green;
   }

   #P1
   {
       background-color:#f00;    
   } 
}

@media print 
{
   #ActionPanel
   {
       visibility:hidden;
   } 
}

Answer 1

所有背景都会自动从印刷版本中剥离。这是防止墨水浪费的方法。

但是，您可以在浏览器中启用它。（具体方法取决于每个浏览器）。

Answer 2

如果不在浏览器中手动设置首选项，则无法打印背景颜色。但是，对于某些人来说，这可能不是一个选择。我能找到的最好的解决方法是相当不优雅的。您应该创建一个带有大颜色边框的div标签，而不是使用“background-color”（不打印）。问题是彩色边框可以正确打印。然后，在显示突出显示的颜色的位置，放置另一个div标签，其上面的文本位于顶部。不太优雅，但它确实有效。

最好将文本div和高亮显示div设置在第三个div中，以便于放置。内部div应该是“绝对”位置，外部div应该是“相对”位置。此示例代码在firefox和chrome中进行了测试：

<style type="text/css">
  #outer_box {
      position: relative; 
      border: 2px solid black; 
      width: 500px; 
      height:300px; 
  }

  #yellow_highlight {
      position: absolute; 
      width: 0px;
      height: 30px;
      border-left: 300px;
      border-color: yellow; 
      border-style: solid; 
      top: 0; 
      left: 0px
  }

  #message_text {
      position: absolute; 
      top: 0; 
      left: 0px;
  }
</style>

<body>
  <div id="outer_box">
    <div id="yellow_highlight">&nbsp;</div>
    <div id="message_text">hello, world!</div>
  </div>
</body>

HTML / CSS - 打印时为什么背景颜色变白？

2 个答案: