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: #990000;
  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