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

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

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

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

78
background-image css printing

10 ответов

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

43

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

169

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

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

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

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

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

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

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

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

67

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

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

приведенный ниже код хорошо работает для меня (по крайней мере, для 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>
9

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

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

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

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

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

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

- hanz

6

использовать 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...
    }       
}

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

4

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

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

}

1

Вы можете сделать некоторые трюки, как это:

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

в теге body:

<img src="YOUR IMAGE URL" class="whater"/>
0