Цвет фона div на странице печати не работает

Question

Я хочу использовать div с background-color, но если я печатаю страницу, она отображается белым.

При создании таблицы с использованием <tr bgcolor="#333333"> она также не работает.

Как создать страницу для печати, используя css и html?

Мой код:

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
   </tr>
</table>

Answer 1

Я бы посмотрел на медиазапрос способ нацеливания таблицы стилей на печать. Я не верю, что вы найдете общий способ кросс-браузерного выполнения того, что вы хотите сделать (контролировать, печатает ли принтер пользователя фон) без использования PDF-файлов вашего контента, что может быть нежелательно / выполнимо. Тем не менее, вам следует подумать об особой обработке стилей печати и, возможно, избегать фонов при оформлении печатной страницы.

http://www.w3.org/TR/css3-mediaqueries/

EDIT

Если вы хотите, чтобы фоны были распечатаны и у вас был один пользователь, посмотрите на ваш другой комментарий, научите его печатать фоны на принтере. Смотрите, например, в Firefox (флажок):

Answer 2

CSS: box-shadow: inset 0 0 0 1000px gold;

Работает для всех браузеров и для ячеек и строк таблицы.

Answer 3

Цвета фона и изображения не печатаются по умолчанию.

Это опция принтера, которую ваши пользователи могут изменить, но вы абсолютно не можете рассчитывать на то, что ваши пользователи знают или делают это. Вы не можете контролировать это со стороны сети (насколько я знаю).

Answer 4

В Crome "-webkit-print-color-Adjust: точный;"работает для меня.

Использование:

@media print {
    .collage_bg {
        background-color: #E6E7E9 !important;
        -webkit-print-color-adjust: exact; 
    }
}

или параметр Проверка фоновой графики:

Оба варианта работают нормально для меня.

Answer 5

Вот что-то сработало для меня, так как я использовал элемент блока фиксированного размера. Используемое изображение 1px X 1px, но вынуждено расширяться до размера коробки. Таким образом, мы печатаем изображение напрямую, а не цвет фона / изображение.

<style type="text/css">
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
</style>


<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</div>
</div>

Answer 6

Однако вы всегда можете использовать изображение для этого.Сделайте изображение шириной 1 пиксель и повторите это так:

background: url('path/to/image.png') repeat-x;