Как добавить фоновое изображение для печати в IE / FF?

Question

В других темах я обнаружил, что IE / FF не печатает фоновые изображения по умолчанию . Теперь это позор, потому что фоновые изображения добавляют некоторые возможности, которые очень трудно воспроизвести с помощью классических тегов <img>:

• Вы можете выровнять их по горизонтали и вертикали
• Вы можете обрезать их, если они больше, чем целевой элемент (что также позволяет использовать CSS-спрайты)

Теперь это не невозможно сделать, но для этого потребуется, чтобы у меня были разные HTML-макеты для печати и обычной страницы, а макет печати будет довольно сложным (поскольку мне придется использовать <table> s для достижения вертикального выравнивание). Кроме того, преимущества CSS-спрайтов будут потеряны.

Есть ли надежда? Я понимаю, что @media print не помогает, но разве нет чего-то другого, возможно, специфичного для браузера, которое позволило бы сказать: «Да, это не нормальный фон, это действительно должно быть даже в просмотр печати "?

Answer 1

Не возможно.Вы должны были бы как-то конвертировать фоновые изображения в img или использовать Canvas.Конечно, использование canvas зависит от того, какой IE вы поддерживаете.

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

Answer 2

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

Не могли бы вы взглянуть на включение изображения, затем скрыть его с помощью CSS, а дублирование - в качестве фонового изображения (возможно, динамически с использованием JS)? Таким образом, вы можете убедиться, что само изображение отображается в вашей таблице стилей печати, и вы получите преимущества, которые дает фоновое изображение. Я создал очень простой пример здесь .