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