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

【问题标题】：HTML/CSS - Why background-color turns white when printing?HTML/CSS - 为什么打印时背景颜色变白？
【发布时间】：2011-08-17 09:18:18
【问题描述】：

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

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

【问题讨论】：

标签： html css printing

【解决方案1】：

所有背景都会自动从印刷版本中去除。这样可以防止墨水浪费。

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

【讨论】：

【解决方案2】：

如果不在浏览器中手动设置首选项，就无法打印背景颜色。但是，对于某些人来说，这可能不是一个选择。我能找到的最好的解决方法是相当不雅的。而不是使用“背景颜色”（不打印），您应该创建一个带有大颜色边框的 div 标签。问题是彩色边框可以正确打印。然后，在显示突出显示的颜色的地方，放置另一个 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>

【讨论】：