Лучшие способы обойти фоны CSS не печатая

Question

Часто замечательно, что фоны CSS не печатаются, однако иногда я использую их для передачи контекстной информации. Какой лучший способ обойти фоны CSS, которые не печатаются, но вы действительно хотите отобразить. Пример, над которым я сейчас работаю, - это таблица, отображающая финансовую информацию. Различные цвета фона используются для указания того, насколько «хорошим» является число (например, очень прибыльное, прибыльное, нейтральное, отрицательное, очень отрицательное).

Answer 1

Я использовал границы для имитации фона, когда мне действительно нужен цвет фона. Примерно так будет работать (но я прошу прощения за то, что не проверил это):

div.must-have-background-for-print {
    position: relative;
    width: 400px;
}
div.must-have-background-for-print div.background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 400px solid #999;
}

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

Если вы начали с этого:

<div class="has-background">Some stuff in here</div>

Вы можете использовать это:

<div class="has-background">
    <div class="background" />
    <div class="content">Some stuff in here</div>
</div>

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

Answer 2

Два предложения:

1. Цветовой код текста в строках таблицы
2. Добавление цветных значков в начало или конец строк таблицы

Вы можете даже включить их в обычный вид с цветами фона.

Answer 3

Это настройка браузера. Включить фоновую печать в IE . Таким образом, вы можете изменить настройки браузера (возможно, в интрасети) или просто экспортировать отчет в Excel или другой формат для печати. ​​

Answer 4

Я столкнулся с той же проблемой табличных данных цветовой кодировки в html, в итоге я просто переключился на генерацию pdf для цветных распечаток и сделал черно-белый доступным только в html

Answer 5

Вы можете сделать шрифт больше и / или жирным, и / или курсивом, и / или красочным.