CSS 媒体特性 - color-index

CSS 媒体特性 **color-index** 用于检测设备显示器可以表示的颜色数量。它对于区分具有有限颜色功能的设备（例如单色（黑白）显示器）和可以渲染更大范围颜色的设备特别有用。

您还可以使用 **min-color-index** 和 **max-color-index** 变体来查询设备可以显示的最小和最大颜色数。

可能的值

**<integer>** − 表示输出设备可以显示的颜色数量。

语法

color-index: <integer>;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS color-index - <integer> 值

以下示例演示了 **color-index** 媒体特性，元素默认情况下将具有红色文本颜色。

对于具有至少 8 个条目的颜色查找表的设备，文本背景将变为紫色。

Open Compiler

<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 的设备，元素的文本颜色将为蓝色，背景颜色将变为紫色。

Open Compiler

<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 的设备，元素的文本颜色将为蓝色，背景颜色将变为紫色。

Open Compiler

<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>

打印页面