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

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

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

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

10 78
css background-image 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 работает хорошо. Однако я обнаружил, что если вы немного измените его, вы можете просто использовать его для добавления изображения заголовка, используя :перед псевдо-элементом следующим образом.

@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