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

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

6 голосов
/ 17 августа 2011

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

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

Ответы [ 2 ]

10 голосов
/ 17 августа 2011

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

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

4 голосов
/ 16 марта 2012

Невозможно печатать цвета фона без ручной настройки в вашем браузере. Тем не менее, это может быть не вариант для некоторых людей. Лучший обходной путь, который я могу найти, довольно не элегантен. Вместо того, чтобы использовать «background-color» (который не печатается), вы должны создать тег div с большой цветной границей на нем. Дело в том, что цветные рамки могут печататься правильно. Затем, где отображается выделенный цвет, поместите еще один тег div с текстом сверху. Не элегантный, но работает.

Лучше установить и текстовый div, и div подсветки в третьем div для удобного размещения. внутренние div должны быть в позиции "absolute", а внешние 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...