HTML/CSS - Why background-color turns white when printing?

问题

My background color or even the font colors of my elements suddenly turns white when printing. Here's a sample markup:

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

an here's the CSS

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

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

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

回答1:

All backgrounds are automatically stripped away from the printed version. It is that way to prevent ink waste.

You can however, enable it in your browser. (How to do that depends on each browser specifically).

回答2:

There is no way to have background colors print without manually setting a preference in your browser. However, this may not be an option for some people. The best workaround I can find is rather inelegant. Instead of using "background-color" (which doesn't print), you should create a div tag with a big color border on it. The thing is is that colored borders can print correctly. Then, where the highlighted color is displayed, lay another div tag with the text on it on top. Inelegant, but it works.

It's best to set both the text div and the highlight div's within a third div for easy placement. the inner divs should be position "absolute" and the outer div should have position "relative". This sample code is tested in both firefox and 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>

来源：https://stackoverflow.com/questions/7090451/html-css-why-background-color-turns-white-when-printing

标签

html

css

printing