Я новичок в этой компании, и у нас есть продукт, который использует мили CSS. Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня проблемы с background-color
in @media print
.
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Все остальное работает, я могу изменить границы и тому подобное, но background-color
в печати это не получится. Теперь я понимаю, что вы не сможете ответить на мой вопрос без более подробной информации. Мне было просто любопытно, был ли у кого-то этот вопрос или что-то подобное раньше.
css
media-queries
Уэстон Уотсон
источник
источник
@media print
запрос, который удаляет фоновые цвета из таблиц (например, полос).Ответы:
Если у пользователя в настройках печати отключен «Цвет фона и изображения для печати», CSS не будет переопределять это, поэтому всегда учитывайте это. Это настройка по умолчанию .
Как только это будет установлено, он будет печатать цвета фона и изображения, что у вас там будет работать.
Встречается в разных местах. В IE9beta это находится в Print-> Параметры страницы в разделе Параметры бумаги
В FireFox он находится в Параметры страницы -> вкладка [Формат и параметры] в разделе Параметры.
источник
*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
Чтобы включить фоновую печать в Chrome:
источник
color-adjust
вместо этого.Понял:
CSS:
Работает для всех ящиков - включая ячейки таблицы !!!
источник
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */
Если вы хотите, чтобы ваши спрайт-изображения были видны, используйте технику img / clip css-tricks.com/css-sprites-with-inline-images , которая даст вам изображения в IE9 и FF ( но не IE8)Попробуйте это, у меня это работает в Google Chrome:
источник
-webkit-print-color-adjust: exact;
в одиночкуis Not enough
вы должны использовать!important
с атрибутомэто предварительный просмотр печати на Chrome после того, как я добавил
!important
к каждомуbackground-color
иcolor
приписал в каждом тегеи это предварительный просмотр печати на Chrome перед добавлением
!important
Теперь, чтобы узнать, как
inject
!important
использовать стиль div, посмотрите этот ответ. Я не могу ввести стиль с правилом!источник
Два решения, которые работают (по крайней мере, на современном Chrome - не тестировались):
источник
color-adjust
или вариант webkit, на самом деле мне не нужно важное правило.Если вы хотите создать «дружественные для печати» страницы, я рекомендую добавить «! Важное» в ваш CSS @media print. Это побуждает большинство браузеров печатать фоновые изображения, цвета и т. Д.
ПРИМЕРЫ:
источник
Есть еще один трюк, который вы можете сделать, не активируя опцию печати границы, упомянутую в других публикациях. Поскольку границы будут распечатаны вы можете моделировать твердый фон цвет с этим хаком:
Активируйте его, добавив класс к вашему элементу:
Хотя это требует некоторого дополнительного кода и особой осторожности, чтобы сделать видимыми цвета фона, это пока единственное известное мне решение.
Обратите внимание, что этот хак не будет работать с элементами, отличными от
display: block;
илиdisplay: table-cell;
, поэтому, например,<table class="your-background">
и<tr class="your-background">
не будет работать.Мы используем это, чтобы получить фоновые цвета во всех браузерах (по-прежнему требуется IE9 +).
источник
Что касается хрома, я использовал что-то вроде этого, и это сработало для меня.
В теге body
Или для конкретного элемента, скажем, если у вас есть таблица, и вы хотите заполнить тд, т.е. ячейку,
источник
Несмотря на то, что
!important
использование обычно не одобряется, этот код нарушает правила, приbootstrap.css
котором строки таблицы не печатаютсяbackground-color
.Предположим, вы пытаетесь стилизовать следующий HTML:
Чтобы переопределить этот CSS, поместите следующее (более конкретное) правило в таблицу стилей:
Это работает, потому что правило более конкретное, чем загрузочное по умолчанию.
источник
Нашел эту проблему, потому что у меня была похожая проблема при попытке сгенерировать PDF из вывода html в Google Apps Script, где фоновые цвета также не «напечатаны».
The
-webkit-print-color-adjust:exact;
и!important
решения, конечно, не работали, ноbox-shadow: inset 0 0 0 1000px gold;
сделали ... отличный взлом, большое спасибо :)источник
Думаю, я бы добавил недавнюю и актуальную помощь 2015 года из недавнего опыта печати css.
Был в состоянии печатать фоны и цвета независимо от настроек диалогового окна печати.
Чтобы сделать это, я должен был использовать комбинацию ! Важное & -webkit-print-color-Adjust: точный! Важный чтобы фон и цвета печатались правильно.
Кроме того, при объявлении цветов я обнаружил, что наиболее упрямые области нуждаются в определении непосредственно для вашей цели. Например:
И ваш CSS:
источник
Проверено и работает над Chrome, Firefox, Opera и Edge к 2016/10 году. Должен работать в любом браузере и всегда должен выглядеть так, как ожидается.
Хорошо, я провел небольшой кросс-браузерный эксперимент для печати цветов фона. Просто скопируйте, вставьте и наслаждайтесь!
Вот полная печатная HTML-страница для начальной загрузки:
источник
Лучшее «решение», которое я нашел, - предоставить заметную кнопку или ссылку «Печать», которая появляется в небольшом диалоговом окне, в котором смело, кратко и кратко объясняется, что им необходимо настроить параметры принтера (с помощью инструкции ABC 123), чтобы включить фон. и печать изображений. Это было очень успешно для меня.
источник
В некоторых случаях (блоки без содержимого, но с фоном) его можно переопределить с помощью границ, индивидуально для каждого блока.
Например:
источник
Вы можете использовать тег
canvas
и «нарисовать» фон, который работает на IE9, Gecko и Webkit.источник
Если вы не возражаете против использования изображения вместо цвета фона (или, возможно, изображения с цветом фона), приведенное ниже решение сработало для меня в FireFox, Chrome и даже IE без каких-либо переопределений. Установите изображение где-нибудь на странице и скрывайте его, пока пользователь не напечатает.
HTML на странице с фоновым изображением
Css
}
источник
!important
значение каждому атрибуту в моем классе, который затем заставил его работать.Вы не установите
background-color
внутри печать таблицы стилей. Просто установите атрибут в нормальном CSS-файле, и он отлично работает :)Проверьте этот пример: HTML-шаблон Ultimate Print с верхним и нижним колонтитулом
Демо: окончательный шаблон HTML для печати с демонстрацией верхнего и нижнего колонтитула
источник
Работает в Chrome и Edge
источник