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

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

92 голосов
/ 12 июля 2011

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

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

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

Ответы [ 12 ]

191 голосов
/ 16 января 2014

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

72 голосов
/ 27 сентября 2012

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

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

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

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

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

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

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

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

54 голосов
/ 04 июля 2017

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

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}
46 голосов
/ 12 июля 2011

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

13 голосов
/ 12 декабря 2016

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

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

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

#example2 {
    background-color: #123456 !important;
}
6 голосов
/ 26 ноября 2013

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

-hanz

4 голосов
/ 04 марта 2013

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

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

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

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

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

1 голос
/ 19 сентября 2017

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

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

}

0 голосов
/ 13 марта 2019

https://gist.github.com/danomanion/6175687 предлагает элегантное решение с использованием пользовательского маркера вместо фонового изображения: 

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

Включая это в блок 

@media print {
}

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

Страница:
...