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

Ответ 1

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

Почему?

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

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

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

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

Нету...

Итак, мышление здесь: "Что, если бы мы могли" вернуться "и отменить это. К сожалению, CSS не работает так: да, браузеры загружают объявления CSS в" очередь ", где выигрывает последнее объявление (LIFO, или last-in-first-out), но я не знаю, как удалить этот стек. Поэтому разработчики CSS просто добавляют еще больше...

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

Может быть!

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

• Загрузите источник BS (меньше или sass), отредактируйте код нарушения и затем скомпилируйте его. (Вам нужно использовать локальную копию, CDN не будет работать.)
• Загрузите выбранный вами вариант CSS, найдите и удалите код нарушения. (Нет CDN снова.)
• Используйте getbootstrap.com/customize, чтобы создать новый вариант - исключить "Стили для печати" в разделе "Общий CSS". (Опять же, нет CDN)
• Переопределить те элементы, которые вы хотите распечатать, например:

    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

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

Наконец

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

Ответ 2

Несмотря на то, что использование !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;
    }
}

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

просто сделайте значение специфичности более конкретным, и все будет в порядке. что-то вроде:

@media print {
   tbody>tr:nth-child(even)>td {
        background-color: rgb(230, 216, 216) !important;
    }
}