Этот вопрос задавался раньше, но в моем случае решение неприменимо. Я хочу, чтобы определенные фоновые изображения были напечатаны, потому что они являются неотъемлемой частью страницы. (Они не являются изображениями непосредственно на странице, потому что некоторые из них используются как спрайты CSS.)
Другое решение по тому же вопросу предполагает использование list-style-image
, которое работает только в том случае, если у вас есть разные изображения для каждого значка, спрайты CSS невозможны.
Есть ли другое решение, помимо создания отдельной страницы со встроенными значками?
источник
В браузерах по умолчанию отключена возможность печати фоновых цветов и изображений. Вы можете добавить несколько строк в CSS, чтобы обойти это. Просто добавь:
источник
!important
нужно?color-adjust
К сожалению, FireFox не поддерживает должным образом. Кажется, это применимо только к фону, а не кcolor
свойству css. Об этом сообщается как об ошибке , без особой активности или голосов. Сохранение фона совершенно бесполезно, если цвет шрифта не сохраняется, что делает его нечитаемым.Я нашел способ распечатать фоновое изображение с помощью CSS. Это немного зависит от того, как выложен ваш фон, но, похоже, для моего приложения это работает.
По сути, вы добавляете в
@media print
конец таблицы стилей и немного меняете фон тела.Например, если ваш текущий CSS выглядит так:
В конце таблицы стилей вы добавляете:
Это добавляет изображение к телу как изображение «переднего плана», что делает его пригодным для печати. Возможно, вам понадобится добавить дополнительный CSS, чтобы сделать
z-index
правильный. Но опять же, все зависит от того, как будет оформлена ваша страница.Это сработало для меня, когда я не мог отобразить изображение заголовка в режиме печати.
источник
<img>
(для RWD) на другой для@media print
. Веб-изображение было на темном фоне, поэтому печать этого изображения на белой бумаге не работала, и я не хотел заставлять пользователей печатать темный фон в заголовке. Отлично!Приведенный ниже код мне подходит (по крайней мере, для Chrome).
Я также добавил некоторые элементы управления полями и ориентацией страницы (портретная, альбомная).
источник
Обязательно используйте атрибут! Important. Это значительно увеличивает вероятность сохранения ваших стилей при печати.
источник
Как сказал @ ckpepper02, опция body content: url работает хорошо. Однако я обнаружил, что если вы немного измените его, вы можете просто использовать его для добавления своего рода изображения заголовка с помощью псевдоэлемента: before следующим образом.
Это приведет к перемещению изображения вверху страницы, и, судя по моему ограниченному тестированию, оно работает в Chrome и IE9.
-hanz
источник
Используйте псевдоэлементы. Хотя многие браузеры игнорируют фоновые изображения, псевдоэлементы, содержимое которых установлено на изображение, технически НЕ являются фоновыми изображениями. Затем вы можете разместить фоновое изображение примерно там, где оно должно было быть (хотя это не так просто и точно, как исходное изображение).
Одним из недостатков является то, что для того, чтобы это работало в Chrome, вам нужно указать это поведение вне вашего медиа-запроса для печати, а затем сделать его видимым в блоке медиа-запроса для печати. Итак, примерно так ...
Недостатком является то, что изображение часто будет загружаться при обычной загрузке страницы, добавляя ненужный объем. Вы можете избежать этого, просто используя то же изображение / путь, который вы уже использовали для исходного видимого изображения.
источник
он работает в google chrome, когда вы добавляете атрибут! important к фоновому изображению, убедитесь, что вы сначала добавили атрибут, и повторите попытку, вы можете сделать это так
}
источник
Вы можете использовать границы для фиксированных цветов.
а для градиентного фона вы можете использовать:
источник
https://gist.github.com/danomanion/6175687 предлагает элегантное решение с использованием настраиваемого маркера вместо фонового изображения:
Включив это в
block, я могу заменить белый на прозрачном логотипе на экране, отображаемый как фоновое изображение, на черный на прозрачном логотипе для печати.
источник
Вы можете проделать такие трюки:
В теге тела:
источник