Печать фонового цвета в Firefox и IE

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

//Hack for Google Chrome
-webkit-print-color-adjust:exact;

Я рад, если кто-то может мне помочь в этом.

Ответы

Ответ 1

Для Firefox в диалоговом окне "Печать" есть кнопка "Дополнительно" или "Показать детали", если вы нажмете на нее, в разделе "Внешний вид" есть два флажка. Один для печати фоновых цветов и печати фоновых изображений.

Ответ 2

* {
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;}

Браузеры: Chrome, Safari, FireFox

Подробнее: https://wiki.csswg.org/ideas/print-backgrounds

Ответ 3

Кажется невозможным, как говорит Спарк, но вы можете использовать широкие границы в качестве обходного пути (например, div с высотой 0 и границей 100 пикселей).

Ответ 4

Если вы в порядке с тем, что ваш элемент имеет фиксированную высоту/ширину, вы можете установить его размер, поместить в него 1px цветное изображение (какого бы цвета вы ни выбрали для фона) и сделать его заполняющим пространство. Затем вы можете абсолютно разместить свой контент сверху.

<div style="position: relative; width: 100px; height: 100px;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

Или вы можете сделать то же самое с рамкой вместо изображения:

<div style="position: relative; width: 100px; height: 100px;">
    <div style="width: 0; height: 0; border: 50px solid black;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello world
    </div>
</div>

(Исходная идея отсюда: https://defuse.ca/force-print-background.htm)

Ответ 5

Для Firefox

color-adjust:exact;

будет работать так же, как -webkit-print-color-adjust:exact;