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

Я хочу использовать 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>

Ответ 1

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

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

ИЗМЕНИТЬ

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

В Crome "-webkit-print-color-adjust: exact;" работает для меня.

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

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

Или выберите опцию Фоновая графика:

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

Ответ 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>

Ответ 6

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

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