Как распечатать фоновые изображения в FF или IE?

Ответ 1

Рассматривали ли вы использование таблицы стилей печати? Это может позволить вам сделать что-то вроде:

<div class="star">*</div>

/* media:screen */
.star {
    background: ...;
    overflow: hidden;
    text-indent: 9999em;
}

/* media:print */
.star {
    text-indent: 0;
}

или даже проще:

<div class="star"><img src="./images/star.jpg" alt="*" /></div>

/* media:screen */
.star img {
    visibility: hidden;
}

/* media:print */
.star img {
    visibility: visible;
}

Вы можете указать таблицы стилей, которые браузеры должны использовать, поставляя медиатеку либо с помощью css, либо с помощью элемента ссылки:

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

Ответ 2

В Firefox перейдите в File = > Page Setup. Существует флажок "Печать фона (цвета и изображения)". Просто проверьте это, и все должно быть установлено.

Ответ 3

В вашем файле print.css измените фоновое изображение на элемент списка.

Итак:

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

Этот метод описан более подробно: http://www.web-graphics.com/mtarchive/001703.php

Ответ 4

На самом деле я нашел ответ довольно простым.

Ситуация: у меня был тег div с фоновым изображением. Что не будет распечатываться при печати.

Решение:

• Создайте еще одну таблицу стилей под названием "print.css"

• Добавьте следующую строку кода ко всем своим веб-страницам сразу после ссылки на оригинальную ссылку css:

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

• Сразу же после вашего оригинального заголовка без печати добавьте следующее:

  <div id="header"></div> <!-- YOUR NON PRINTING HEADER -->
  
  <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div>
  

• В вашем файле style.css, который является основным стилем CSS для вашего сайта, добавьте следующую строку:

  #printheader {display: none; } /* Makes the print header not visible */
  

• В вашем файле print.css добавьте следующий код:

  #footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */
  
  #container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */
  
  #printheader {display: block; } /* Turns ON the div when printing */
  

То, что вы делаете, по существу отключает заголовок на обычной странице "экран" и включает головку печати, когда вы выполняете вызов печати.

** Обратите внимание: вам нужно будет изменить файл print.css, чтобы включить другие элементы вашего файла style.css, чтобы отформатировать шрифты, цвета и т.д. Играйте с "Предварительный просмотр" и добавьте элементы, которые вы нужно, пока вы не получите распечатку, которую вы искали.

Ответ 5

Для IE http://support.microsoft.com/kb/980077

Для FF должно быть что-то подобное.

p.s. вы не можете установить это для клиентов!

p.s.2. вы можете заменить эти звезды изображениями переднего плана (абсолютными, если необходимо) в css (media = "print" ).

Ответ 6

Не используйте background-image для отображения печатаемых изображений, используйте вместо этого обычный тег <img>.

background-image предназначен для неважных изображений, которые большинство современных браузеров имеют тенденцию пропускать во время печати (настройка по умолчанию в IE 11, Chrome 35, FF 30).

Зачем вам не использовать тег img?

• Проблемы с выравниванием. Используйте абсолютное позиционирование для решения проблем выравнивания.

• Sprite - Sprite возможно с помощью простых тегов img и div.

• Сделать более трудным для пользователя сохранение изображения - это также возможно с помощью простых img и div.

• Чтобы "сохранить мой HTML чистый" - какое-либо из обходных решений действительно делает его более чистым для вас? Бросьте это:)

Ответ 7

У меня была такая же проблема с тем, что IE не поддерживал печать фона.

Итак, я создал 2 divs, один div имел более высокий Z и имел текстовое содержимое. Второй div был сразу за фронтом div, но с более низким индексом Z и имел изображение (img не фоновое изображение) для ширины и высоты 100%. Поэтому, когда я показал 2 divs вместе, он выглядел как один div, потому что они отлично перекрывались. Когда я печатаю в браузере IE, он отображается с изображением, потому что изображение не является фоновым изображением, а обычным тегом img, который заполняет нижний div.

некоторый код.

<div id="survey" class="surveyResponseWindow" style="display:none;">Please logout and re-login, because your session has expired.</div>
<div id="surveyBackground" class="surveyBackgroundDiv" style="display:none;">
<!-- provides the background image for ie browser so that it does not show the lower level divs. -->
<img src="/rsm/jsp/public/images/contentGrad.gif" width="100%" height="100%" />
</div>

<script language="javascript" type="text/javascript">  
function showSurvey(surveyResponseId) {
    var e = document.getElementById("survey");
    var bkgd = document.getElementById("surveyBackground");
    var focusinput = document.getElementById('focusinput');
    var nh = 'data-nohide';

    if (e.style.display=='none') {
        e.style.display='block';//show div
        bkgd.style.display='block';//show div
    }
    focusinput.focus();//set focus so we know when they click outside

    e.onclick = function(e) {
        this.style.display='none';//hide div if they click on it
        bkgd.style.display='none';//show div
    };
    //if the user press ESC
    focusinput.onkeyup = function(e){
        if(e.keyCode === 27){
            var survey = document.getElementById("survey");
            var bkgd = document.getElementById("surveyBackground");
            //hide the div
            survey.style.display = 'none';
            bkgd.style.display = 'none';
            this.removeAttribute(nh);
        }else{
            //do something else with other keys(ie:down, up, enter)...
            focusinput.focus();
        }
    };
    //click somewhere else input onblur
    // was taken out because the browser print function would close the survey div page.
    //focusinput.onblur = function(){
    //    if(!e.getAttribute(nh)){
    //      //hide the div
    //        e.style.display = 'none';
    //    }
    //};     

    var params='<%=request.getContextPath()%>/request/dashboard/drilldown/callSurveyDetailAjax.html?surveyResponseId='+surveyResponseId;
    YAHOO.plugin.Dispatcher.fetch(e,params, {onLoad:showBackground});
}

var showBackground = function() {
    var e = document.getElementById("survey");
    var bkgd = document.getElementById("surveyBackground");
    bkgd.style.width = e.innerWidth();
    bkgd.style.height = e.innerHeight();
    bkgd.style.left = e.offsetWidth();
    bkgd.style.top = e.offsetHeight();
}

window.onload = function() {
    var focusinput = document.getElementById('focusinput');
    focusinput.focus();//set focus so we know when they click outside
}
</script>

в CSS поместите это

.surveyResponseWindow 
{
width:500px;
height:600px;
z-index: 2;
position: absolute;
top:100px;
left:150px;
border:1px solid #AAAAAA;   
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;   
box-shadow: -1px 7px 15px -2px #000;
}

.surveyBackgroundDiv 
{
z-index: 1;
position: absolute;
top:100px;
left:150px;
width:500px;
height:600px;
border:1px solid #AAAAAA;   
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;   
box-shadow: -1px 7px 15px -2px #000;
}

Ответ 8

Я считаю, что это настройка браузера, а не бэкэнд веб-сайтов. Однако я могу ошибаться.