Цвет фона TD не виден в предварительном просмотре

Question

У меня есть тд, как это:

<td align="left" bgcolor="#FF0000">

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

Кто-нибудь знает, в чем может быть причина?

Спасибо

Answer 1

Чтобы браузеры WebKit (Safari, Google Chrome) печатали фоновое изображение или цвет, необходимо добавить следующий стиль CSS к элементу:

-webkit-print-color-adjust: exact;

Answer 2

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

Answer 3

Я сам столкнулся с этой проблемой и считаю, что у меня есть решение. Первоначально я сделал это с тегом H1, но затем использовал тот же код для TD

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

Вот пара вещей, на которые стоит обратить внимание:

• background-color - абсолютный запасной вариант и в основном для потомков.
• background-image использует пиксель 1xx1px размером # 404040, преобразованный в PNG. Если у пользователя включены изображения, он может работать, если нет ...
• Установите тень от ящика, если это не сработает ...
• Граница = 1/2 желаемой высоты и / или ширины коробки, сплошная, цветная. В приведенном выше примере я хотел высоту 60px.
• Обнулить высоту / ширину в зависимости от того, что вы контролируете в атрибуте border.
• Цвет шрифта по умолчанию будет черным, если вы не используете! Важный
• Установите высоту строки равной 0, чтобы зафиксировать поле, не имеющее физического размера.
• Создайте и разместите свои собственные чертовы PNG;)

См. Мою скрипку для более подробной демонстрации.

Answer 4

Попробуйте использовать CSS, если можете, и если фон не работает с версией для печати, укажите документ print css.

<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" media="all" /> <link rel="stylesheet" rev="stylesheet" href="print.css" type="text/css" media="print" />

Базовый CSS здесь:

td{ background-color:#FF0000; }