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

Этот вопрос был задан до, но решение не применимо в моем случае. Я хочу, чтобы определенные фоновые изображения были напечатаны, потому что они являются неотъемлемой частью страницы. (Они не являются изображениями непосредственно на странице, потому что некоторые из них используются в качестве спрайтов CSS.)

Другое решение по тому же вопросу предполагает использование list-style-image, который работает только, если у вас есть другое изображение для каждого значка, без CSS спрайтов.

Помимо создания отдельной страницы со встроенными значками, есть ли другое решение?

Ответ 1

У вас очень мало контроля над методами печати в браузере. В большинстве случаев вы можете SUGGEST, но если настройки печати браузера "не печатают фоновые изображения", вы ничего не можете сделать, не переписывая свою страницу, чтобы превратить фоновые изображения в плавающие изображения "переднего плана", которые находятся за другим контентом.

Ответ 2

В Chrome и Safari вы можете добавить стиль CSS -webkit-print-color-adjust: exact; к элементу, чтобы заставить печать цвета фона и/или изображения

Ответ 3

Я нашел способ распечатать фоновое изображение с помощью CSS. Это немного зависит от того, как выкладывается ваш фон, но, похоже, он работает для моего приложения.

По существу, вы добавляете @media print в конец своей таблицы стилей и слегка меняете фон тела.

Пример, если ваш текущий CSS выглядит следующим образом:

body {
background:url(images/mybg.png) no-repeat;
}

В конце вашей таблицы стилей вы добавляете:

@media print {
body {
   content:url(images/mybg.png);
  }
}

Это добавляет изображение в тело как изображение "переднего плана", что делает его пригодным для печати. Возможно, вам понадобится добавить дополнительный CSS, чтобы сделать z-index правильным. Но опять же, до того, как выкладывается ваша страница.

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

Ответ 4

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

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

Ответ 5

Код ниже подходит для меня (по крайней мере, для Chrome).

Я также добавил элементы управления ориентацией и ориентацией страницы (портрет, пейзаж)

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

Ответ 6

Обязательно используйте важный атрибут! Это значительно увеличивает вероятность сохранения ваших стилей при печати.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

Ответ 7

Как и @ckpepper02, содержание тела: параметр url работает хорошо. Однако я обнаружил, что, если вы немного измените его, вы можете просто использовать его для добавления изображений заголовков с использованием: перед псевдоэлементом следующим образом.

@media print {
  body:before { content: url(img/printlogo.png);}
}

Это скопирует изображение в верхней части страницы и из моего ограниченного тестирования, оно работает в Chrome и IE9

-hanz

Ответ 8

Используйте psuedo-элементы. Хотя многие браузеры будут игнорировать фоновые изображения, psuedo-элементы с их содержимым, установленным на изображение, технически НЕ являются фоновыми изображениями. Затем вы можете поместить фоновое изображение примерно там, где должно было пройти изображение (хотя оно не так просто или точно, как исходное изображение).

Один из недостатков заключается в том, что для работы в Chrome вам необходимо указать это поведение вне вашего запроса на печать, а затем сделать его видимым в блоке запросов на печать. Итак, что-то вроде этого...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

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

Ответ 9

он работает в google chrome при добавлении важного атрибута в фоновое изображение сначала добавьте атрибут и повторите попытку, вы можете сделать это как

    .inputbg {
background: url('inputbg.png') !important;

}