print-color-adjust

print-color-adjust: economy;
print-color-adjust: exact;

/* Global values */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

Значение свойства print-color-adjust должно быть одним из следующих ключевых слов.

economy

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

exact

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

Существует ряд причин, по которым браузер может отклониться от указанного вида, например:

• Содержимое использует цвета текста и фона, которые будут слишком похожи для читаемости на выходном устройстве.
• Если выходное устройство — принтер, для экономии чернил могут быть удалены тёмные или плотные фоновые изображения.
• При печати страницы браузер может заменить светлый текст на тёмном фоне тёмным текстом на белом фоне.

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

print-color-adjust = 
  economy  |
  exact    

В этом примере показана область с background-image и полупрозрачной функцией linear-gradient() поверх чёрного фона, создающая тёмно-синий градиент позади текста среднего красного цвета. По какой-либо причине, этот вид желателен во всех средах рендеринга, включая бумагу, поэтому мы также используем print-color-adjust: exact чтобы сообщить браузеру не вносить изменений в цвет или стиль области при её рендеринге.

CSS

.my-box {
  background-color: black;
  background-image: linear-gradient(rgb(0 0 180 / 50%), rgb(70 140 220 / 50%));
  color: #900;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font:
    24px "Helvetica",
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}

HTML

<div class="my-box">
  <p>Need more contrast!</p>
</div>

Результат

• Другие свойства, связанные с цветом: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color и column-rule-color
• background-image