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

104

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

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

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

НедовольныйКозел
источник

Ответы:

51

У вас очень мало контроля над методами печати браузера. В лучшем случае вы можете ПРЕДЛОЖИТЬ, но если в настройках печати браузера указано «не печатать фоновые изображения», вы ничего не сможете сделать, не переписав страницу, чтобы превратить фоновые изображения в плавающие изображения «переднего плана», которые оказываются позади другого содержимого.

Марк Б
источник
212

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

Марко Беттиоло
источник
4
Это круто. Делает жизнь намного проще для пользователей phantomjs / webkit
Джейсон,
1
@MuneemHabib Это не работает в IE, на самом деле, единственный поддерживаемый браузер - Chrome: developer.mozilla.org/en-US/docs/Web/CSS/…
Марко Беттиоло
это сработало с хромом ... к счастью, в этом случае мне нужно было только поддерживать Wekkit ...
Дэви
2
@DisgruntledGoat должен обновить этот ответ, чтобы он стал правильным, поскольку он быстро решил мою проблему (мой проект на работе ориентирован только на Chrome). Очевидно, что это работает не во всех браузерах, но, тем не менее, об этом следует знать заранее.
Brett84c
1
@ Brett84c: Я не согласен, поскольку это решение только для одного браузера.
Кукельтье,
86

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

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}
Кевин фон Бош
источник
ya работает нормально, но Mozilla отмечает нестандартность. Эта функция нестандартна и не входит в стандартную систему. Не используйте его на рабочих сайтах, выходящих в Интернет: он подойдет не для всех пользователей. Между реализациями также может быть большая несовместимость, и поведение может измениться в будущем.
Qh0stM4N
3
Зачем это !importantнужно?
Сработало у меня! Спасибо.
Ник Вудхэмс
color-adjustК сожалению, FireFox не поддерживает должным образом. Кажется, это применимо только к фону, а не к colorсвойству css. Об этом сообщается как об ошибке , без особой активности или голосов. Сохранение фона совершенно бесполезно, если цвет шрифта не сохраняется, что делает его нечитаемым.
Frédéric
Это хорошее решение. Только учтите, что с IE11 он не работает (я знаю!).
Рафаэль С. Фиялковски
76

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

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

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

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

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

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

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

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

ckpepper02
источник
3
Это было отличное решение для того, что мне нужно было сделать, а именно переключить встроенный <img>(для RWD) на другой для @media print. Веб-изображение было на темном фоне, поэтому печать этого изображения на белой бумаге не работала, и я не хотел заставлять пользователей печатать темный фон в заголовке. Отлично!
JHogue
@JHogue - Спасибо! Рад, что помог тебе.
ckpepper02 08
4
Хотя это не «правильный» ответ. Это НАМНОГО полезнее, чем принятый ответ.
Xenology
ниже ответ stackoverflow.com/a/15208258/915865 должен быть отмечен, так как он имеет лучшее объяснение, imho
Kat Lim Ruiz
1
В firefox это сработало, только если вы использовали контент внутри: раньше, как @ hanz, ответ
vaskort
18

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

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

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

#example2 {
    background-color: #123456 !important;
}
орехи и пиво
источник
С помощью этого метода я создал для своей компании несколько простых отчетов, удобных для печати. Он работает на OS X Chrome / Safari и Windows 8 Chrome / IE (на других платформах не пробовал).
nut-n-beer
3
Похоже, это не повлияло на Chrome, Firefox и Safari на Mac.
intcreator 09
Это как раз то, что мне нужно, чтобы применить атрибут к каждому использованию этого конкретного элемента и позволить мне распечатать документ соответствующим образом. Спасибо!
джонни
7

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

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

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

-hanz

Ханц
источник
5

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

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

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

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

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

Dtipson
источник
1

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

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

}

Хади Эль-Хади
источник
хороший момент, чтобы упомянуть, решил мою проблему вместе с -webkit-print-color-adjust :ight! important;
czmarc
0

Вы можете использовать границы для фиксированных цветов.

 borderTop: solid 15px black;

а для градиентного фона вы можете использовать:

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;
Виктор Батиста
источник
0

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 {
}

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

ms609
источник
Это симпатичное исправление, но оно не работает, если фоновое изображение намного больше контейнера. (он растягивает мой содержащий div)
Jabbamonkey
-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>

В теге тела:

<img src="YOUR IMAGE URL" class="whater"/>
Саид Шакиба
источник