HTML / CSS-почему цвет фона становится белым при печати?

мой цвет фона или даже цвета шрифтов моих элементов внезапно становятся белыми при печати. Вот пример разметки:

<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;
   } 
}
6
css html printing

2 ответов

все фоны автоматически удаляются из печатной версии. Это способ предотвратить отходы чернил.

вы можете, однако, включить его в своем браузере. (Как это сделать зависит от каждого браузера в частности).

10

нет возможности печатать цвета фона без ручной настройки предпочтений в вашем браузере. Тем не менее, это может быть не вариант для некоторых людей. Лучшее решение, которое я могу найти, довольно неэлегантно. Вместо использования" background-color " (который не печатается), вы должны создать тег 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>
4