CSS 媒體特性 - color-index

CSS 媒體特性 **color-index** 用於檢測裝置顯示器可以表示的顏色數量。它對於區分具有有限顏色功能的裝置（例如單色（黑白）顯示器）和可以渲染更大範圍顏色的裝置特別有用。

您還可以使用 **min-color-index** 和 **max-color-index** 變體來查詢裝置可以顯示的最小和最大顏色數。

可能的值

**<integer>** − 表示輸出裝置可以顯示的顏色數量。

語法

color-index: <integer>;

CSS color-index - <integer> 值

以下示例演示了 **color-index** 媒體特性，元素預設情況下將具有紅色文字顏色。

對於具有至少 8 個條目的顏色查詢表的裝置，文字背景將變為紫色。

<html>
<head>
<style>
   p {
      color: red
   }
   @media (color-index >= 8) {
      p {
         background-color: violet;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-index</p>
</body>
</html>

CSS color-index - max-color-index 屬性

以下示例演示了 **max-color-index: 1500** 媒體特性，元素預設情況下將具有紅色文字顏色。

顏色索引大於 15,000 的裝置，元素的文字顏色將為藍色，背景顏色將變為紫色。

<html>
<head>
<style>
   p {
      color: red
   }
   @media (max-color-index: 15000) {
      p {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature max-color-index</p>
</body>
</html>

CSS color-index - min-color-index 屬性

以下示例演示了 **min-color-index: 256** 媒體特性，元素預設情況下將具有紅色文字顏色。

顏色索引小於 256 的裝置，元素的文字顏色將為藍色，背景顏色將變為紫色。

<html>
<head>
<style>
   p {
      color: red
   }
   @media (min-color-index: 256) {
      p {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature min-color-index</p>
</body>
</html>

列印頁面