it-roy-ru.com

Bootstrap print CSS удаляет цвет фона

Когда я использую bootstrap, он удаляет фоновый цвет из всех, когда я пытаюсь напечатать свою страницу .. Почти все на моем веб-сайте используют классы начальной загрузки, поэтому я хочу избежать большого количества ручного CSS за пределами начальной загрузки . I ' мы обнаружили, что bootstrap использует @media print для удаления цвета фона. Я также использую тему начальной загрузки (тема объединена), которая также удаляет цвет фона.

theme-united.css

@media print
*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

bootstrap.min.css

@media print
*, :after, :before {
    color: rgb(0, 0, 0)!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;

Есть ли способ убедиться, что цвет фона не удаляется при печати без редактирования этих двух файлов CSS?

Например: Когда я использую .alert-danger, я хочу, чтобы предупреждение об опасности было напечатано так, как оно отображается на экране, поэтому будет напечатано в виде красной рамки.

См. JSFiddle: http://jsfiddle.net/7mtk7wrh/

18
TheatreOfSouls

К сожалению, нет хорошего ответа на ваш вопрос - но, возможно, если вы понимаете, почему, то вы можете выбрать путь вперед.

Зачем?

Это правда, что Bootstrap использует @media print { * { color: $fff; background: transparent; }} - но есть очень веская причина. Этот фрагмент кода на самом деле получен из проекта normalizer.css (тогдашним колледжем @mdo's, @necolas) - он намерен заставить все браузеры вести себя одинаково. Эти ребята решили «нормализовать» CSS по очень веской причине:

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

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

Помните, что Bootstrap также является «структурой» - так что отправной точкой, если хотите, - и слава @mdo и @necolas за дальновидность, чтобы думать об этом с точки зрения установления предсказуемой базовой линии. (Нет, я их не знаю.)

Нету...

Таким образом, мысль здесь такова: «что если бы мы могли« вернуться »и сбросить это. К сожалению, CSS не работает так - да, браузеры загружают объявления CSS в« очередь », где побеждает последнее объявление (LIFO или last-in»). в первую очередь), но я не знаю, как удалить этот стек. Поэтому разработчики CSS просто добавляют больше в конец ...

Таким образом, можно предположить, что мы можем вернуться назад - добавить * { background-color: inherit }. Проблема в том, что inherit возвращается к родительскому свойству, но * является корнем, поэтому ему не к чему возвращаться. То же самое касается initial

Может быть!

Таким образом, у нас осталось 4 варианта, ни один из которых не является тем, на что вы надеетесь, но это то, что есть. В порядке сложности:

  1. Загрузите исходный код BS (less или sass), отредактируйте код, вызывающий нарушение, а затем скомпилируйте его. (Вам нужно использовать локальную копию, CDN не будут работать.)
  2. Загрузите выбранный вами вариант CSS, найдите и удалите код, который вас обидел. (Снова нет CDN.)
  3. Используйте getbootstrap.com/customize для создания нового варианта - исключите "Стили печатных носителей" в разделе "Общий CSS". (Опять же нет CDN)
  4. Замените определенные элементы, цвет которых вы хотите напечатать: например,.
    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

Теперь CDN-копии BS будут работать, но тогда у вас есть проблема с пользователем, возможно, не печатающим фоны и имеющим вывод белого (например, желтого) на белом!

В заключение

Что ж, я надеюсь узнать причину, по крайней мере, как вы думаете об обходном пути. Общее правило, которому я следую, заключается в том, что при печати фон всегда должен быть белым. Когда вы так ограничены, вы начинаете думать о новых идеях, таких как восклицательные значки вокруг текста, которые только «печатают» (@media only screen { .hidden-screen { display: none; }})

29
Vino

Несмотря на то, что использование !important, как правило, вызывает недовольство, этот код нарушает bootstrap.css

.table td,
.table th {
    background-color: #fff !important;
}

Предположим, вы пытаетесь стилизовать следующий HTML:

<table class="table">
    <tr class="highlighted">
      <th>Name</th>
      <th>School</th>
      <th>Height</th>
      <th>Weight</th>
    </tr>
</table>

Чтобы переопределить этот CSS, поместите следующее (более конкретное) правило в таблицу стилей:

@media print {
    table tr.highlighted > th {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Это работает, потому что правило более специфично, чем загрузочное по умолчанию.

2
The Aelfinn

я также столкнулся с той же проблемой .. я просто удаляю bootstrap.min.css из моего кода, тогда он работает для меня.

1
ihsan

Вы можете заставить это работать, удалив эти строки из файла bootstrap.css, может быть решение jquery, но это намного сложнее, чем удаление нескольких строк. : /

Или вы можете использовать плагин с именем html2canvas, представленный в этом jsfiddle

1
odedta

@ Vino объяснил очень хорошо. Я также столкнулся с проблемой, потому что bootstrap.css делает фон прозрачным. Таким образом, я настроил конкретный элемент в моем собственном файле CSS. Не забудьте заменить <.element> на элемент, в котором вы хотите использовать цветной фон вместо прозрачного.

@media print {
	 .element{
		background-color: white !important;
		box-shadow:  inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
	 }
 } 

0
J Singh

В итоге я столкнулся с той же проблемой, но обнаружил, что Chrome поставляется с опцией показывать фоновую графику в диалоговом окне печати при большем количестве настроек, которые сделали именно это! Модификация Bootstrap (4) не требуется.

0
Davies-Barnard