print-color-adjust

print-color-adjust CSS 属性设置用户代理在输出设备上优化元素外观时可以执行的操作（如果有）。默认情况下，浏览器允许对元素的外观进行任何调整，这些调整被认为根据输出设备的类型和功能是必要和谨慎的。

语法

css
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 属性的值必须是以下关键字之一。

Values

economy

用户代理可以根据需要进行调整，以便为其呈现的设备优化输出。例如，在打印时，浏览器可能会选择省略所有背景图像并调整文本颜色以确保在白纸上阅读时对比度最佳。这是默认值。

exact

元素的内容已专门且仔细地设计为以一种有思想和/或重要的方式使用颜色、图像和样式，因此浏览器对其进行更改可能会使情况变得更糟而不是更好。内容的外观不应更改，除非用户请求。例如，页面可能包含一个信息列表，其中行的背景颜色在白色和浅灰色之间交替。删除背景颜色会降低内容的可读性。

使用说明

浏览器可能希望偏离指定外观的原因有很多，例如

  • 内容使用的文本和背景颜色在输出设备上对于可读性目的而言过于相似。
  • 如果输出设备是打印机，为了节省墨水，可能会删除深色或极其密集的背景图像。
  • 打印页面时，浏览器可能希望将深色背景上的浅色文本替换为白色背景上的深色文本。

用户代理提供的任何允许用户控制颜色和图像使用的选项都将优先于print-color-adjust的值。换句话说，无法保证print-color-adjust会执行任何操作。用户不仅可以覆盖此行为，而且每个用户代理都可以自行决定在任何特定情况下如何处理print-color-adjust。

正式定义

初始值economy
应用于所有元素
继承是
计算值如指定
动画类型离散

正式语法

print-color-adjust = 
  economy  |
  exact

示例

保留低对比度

在这个示例中，显示了一个使用background-image和半透明linear-gradient()函数覆盖黑色背景色的盒子，从而在中等红色文本后面形成深蓝色渐变。无论出于何种原因，这都是任何渲染环境（包括纸质打印）中所需的显示效果，因此我们还使用print-color-adjust: exact来告诉浏览器在渲染盒子时不要对颜色或样式进行调整。

CSS

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

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

结果

规范

规范
CSS 颜色调整模块级别 1
# propdef-print-color-adjust

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅