Стилизованный HTML-элемент при печати выглядит иначе

Question

У меня есть довольно простой HTML-документ, визуальное представление карты, которое отправляется людям, которые покупают подарочную карту через наш веб-сайт. Сумма в долларах добавляется к фоновому изображению и оформляется с помощью CSS. Как я и сказал. Довольно просто.

На экране сумма в долларах (в правом верхнем углу) отображается белым цветом, чего я и хочу.

Как это выглядит на экране

Но при печати (и в режиме предварительного просмотра) сумма в долларах становится темно-серой, что затрудняет просмотр на фоне.

Как это выглядит при печати

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

Любой цвет, кроме белого, кажется, работает нормально. Когда я смотрю на эмуляцию принтера в Inspect Element, красный CSS выглядит красным, и он будет печататься как красный; черный CSS выглядит черным, и он будет печататься как черный; но пока белый CSS выглядит белым, он будет печататься как серый каждый раз. Это сводит меня с ума, и я уверен, что это простое решение.

Нам необходимо, чтобы клиенты могли печатать эти электронные подарочные карты разборчиво. Что мне здесь не хватает?

Answer 1

С моей работой, в печати у них есть какой-то другой код в стиле CSS для отображения. Вы можете использовать

@media print { //your css code }

и проверьте результаты. Предлагаю использовать макет таблицы на всей странице.

Answer 2

История моей жизни: я работаю над проблемой часами, отправляю вопрос с просьбой о помощи и почти сразу выясняю ответ.

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

Решение, похоже, заключается в добавлении -webkit-print-color-adjust: exact; к стилям. По крайней мере, это работает для Chrome и Safari.