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

Question

Мне нужна помощь по этой теме: поскольку я печатаю веб-страницу, она печатает все хорошо, но не фоновые изображения, поэтому в некоторых местах моя страница разбивается. Пожалуйста, предложите.

С уважением, Jos

Answer 1

В вашей таблице стилей печати вы должны использовать что-то вроде:

.background {
  display: list-item;
  list-style-image: url(image.gif);
  list-style-position: inside;
}

Обратите внимание, что вы не можете использовать спрайты изображений и более сложное позиционирование фона таким образом, и вам нужно делать это для каждого изображения.

Answer 2

Я только что столкнулся с той же проблемой.Мое фоновое изображение заголовка не печаталось в отдельных статьях, оставляя большой белый пробел в заголовке страницы, где обычно отображалось изображение заголовка.Чтобы исправить это, я добавил фоновое изображение через HTML прямо на страницу, которую браузер вашего пользователя будет распечатывать по умолчанию.Ниже приведен основной пример того, как этого добиться:

1, создайте пустую таблицу стилей и назовите ее print.css.Теперь добавьте эту таблицу стилей в заголовок своей страницы и убедитесь, что media = "print" .Это необходимо для того, чтобы сообщить браузеру, какие элементы мы хотим и не хотим печатать:

<link rel="stylesheet" href="pathtoyour/css/print.css" type="text/css" media="print" />

2, добавьте изображение, которое вы хотите напечатать, на свою страницу и убедитесь, что оно имеет ID , чтобы мы могли стилизовать его в файле print.css и в вашей основной таблице стилей:

<div id="header">    
<img id="print-image" src="pathtotheimageyouwanttoprint.jpg"/></div>
</div>

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

#print-image {display:none}

4, в вашей таблице стилей print.css , потому что мычтобы ваше изображение не отображалось в основной таблице стилей, теперь нам нужно убедиться, что оно печатается и не остается скрытым.Для этого добавьте следующее:

#print-image {display:block;}

Готово.Протестируйте и настройте стили в соответствии с вашими потребностями.

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

Надеюсь, это поможет.

Answer 3

Попробуйте использовать Javascript Дэвида Арагона

function replaceSprite(selector){

if ($.browser.msie == true) {
    var back_x = $(selector).css('background-position-x'),
        back_y = $(selector).css('background-position-y'),
        back_position = back_x+" "+back_y;
} else {
    var back_position = $(selector).css('background-position');
}

var back_image = $(selector).css('background-image'),
    width = $(selector).width(),
    height = $(selector).height(),
    index1 = back_image.indexOf('http'),
    index2 = back_image.indexOf('.png');

back_position = back_position.split(" ");
back_image = back_image.substring(index1, (index2+4));

$(selector)
        .append('<img src="'+back_image+'"/>')
    .css('width',width)
    .css('height',height)
    .css('overflow','hidden');

$(selector).find('img')
    .css('margin-left',back_position[0])
    .css('margin-top',back_position[1]);

}

http://quickleft.com/blog/printing-css-sprites

Answer 4

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

Пользователь может также распечатать фоновые изображения, но вы не можете принудительно сделать это с помощью кода или разметки.