Есть ли способ установить ff и т.е. распечатать фоновые изображения?
Я использую звёздный образ, чтобы классифицировать некоторые навыки, и я задал его как фоновое изображение и позиционировал либо установить один старт, два, три и т.д. Когда я пытаюсь распечатать страницу, изображения исчезают.
Итак, есть ли способ сделать их отображаемыми, когда я печатаю страницу или, по крайней мере, способ заменить изображения * или что-то, что будет видно?
Рассматривали ли вы использование таблицы стилей печати? Это может позволить вам сделать что-то вроде:
<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" />
В Firefox перейдите в File = > Page Setup. Существует флажок "Печать фона (цвета и изображения)". Просто проверьте это, и все должно быть установлено.
В вашем файле print.css измените фоновое изображение на элемент списка.
Итак:
.background {
display: list-item;
list-style-image: url(yourbackgroundimage.gif);
list-style-position: inside;
}
Этот метод описан более подробно: http://www.web-graphics.com/mtarchive/001703.php
На самом деле я нашел ответ довольно простым.
Ситуация: у меня был тег 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, чтобы отформатировать шрифты, цвета и т.д. Играйте с "Предварительный просмотр" и добавьте элементы, которые вы нужно, пока вы не получите распечатку, которую вы искали.
Для IE http://support.microsoft.com/kb/980077
Для FF должно быть что-то подобное.
p.s. вы не можете установить это для клиентов!
p.s.2. вы можете заменить эти звезды изображениями переднего плана (абсолютными, если необходимо) в css (media = "print" ).
Не используйте background-image для отображения печатаемых изображений, используйте вместо этого обычный тег <img>.
background-image предназначен для неважных изображений, которые большинство современных браузеров имеют тенденцию пропускать во время печати (настройка по умолчанию в IE 11, Chrome 35, FF 30).
Зачем вам не использовать тег img?
Проблемы с выравниванием. Используйте абсолютное позиционирование для решения проблем выравнивания.
Sprite - Sprite возможно с помощью простых тегов img и div.
Сделать более трудным для пользователя сохранение изображения - это также возможно с помощью простых img и div.
Чтобы "сохранить мой HTML чистый" - какое-либо из обходных решений действительно делает его более чистым для вас? Бросьте это:)
У меня была такая же проблема с тем, что 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;
}
Я считаю, что это настройка браузера, а не бэкэнд веб-сайтов. Однако я могу ошибаться.