Как получить фоновое изображение для печати с помощью css?

Я использую пакет ASP Net Sprites для создания CSS Sprites на моем веб-сайте.

Он работает, но изображения, которые он генерирует, не отображаются при печати. ​​

Код, сгенерированный на уровне HTML:

<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a>

Как я могу получить изображение логотипа, когда пользователь печатает страницу?

Я попытался добавить это в мою таблицу стилей print.css, но это не сработало:

#siteLogo
{
    visibility: visible;
}

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

Ответы

Ответ 1

Это зависит от настроек пользователя и их браузера, чтобы печатать или не печатать фоновые изображения. Чтобы не полагаться на это, поместите изображения непосредственно в HTML с фактическим тегом <img />.

Ответ 2

В Chrome и Safari вы можете добавить следующее в свой CSS:

@media print
{
    * {-webkit-print-color-adjust:exact;}
}

Для других веб-браузеров, к сожалению, перед пользователем можно вручную выбрать вариант для печати фоновых изображений (например, для пользователей с IE 9, 10 и 11 им нужно щелкнуть по значку cog → Print → Page Setup, и активируйте опцию)

Ответ 3

У вас может быть собственный медиа-запрос для печати и использования: перед селектором с атрибутом "content".

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

p:before { content: url(images/quote.gif); }

http://www.htmldog.com/reference/cssproperties/content/

Ответ 4

В основном документе будет импортировано 2 таблицы стилей, 1 для экрана и другое для принтера. Вы можете точно настроить параметры мультимедиа по своему усмотрению.

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

Вот фоновое изображение, вызывается в вашем основном файле css, используемом в браузерах.

.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}

И ваш взлом печати, используемый браузерами, когда пользователи начинают диалог печати. Таким образом, вы можете добавить класс печати в свой div и распечатать его, или при необходимости удалить.

.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}

Примечание. Вы также можете использовать правило @media вместо импорта файлов, если хотите избежать дополнительного HTTP-запроса.

ссылка из: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

Ответ 5

установить media = "print" 

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Ссылка

Ответ 6

Если вы используете Internet Explorer, так вы это сделаете:

  • Перейдите в меню "Инструменты".
  • Нажмите "Свойства обозревателя".
  • Перейдите на вкладку "Дополнительно".
  • Поставьте флажок на цвет фона и изображения для печати. ​​

Ответ 7

<div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

Это смысл CSS, который вы опубликовали, также см. на этом веб-сайте: https://defuse.ca/force-print-background.htm

Ответ 8

Попробуйте следующее:

@media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}

Ответ 9

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

.class-name {
background: url('your-image.png') !important;
}

Также вы можете использовать эти полезные правила печати и поместить их в конец файла css:

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}

Ответ 10

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