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>

打印本页