CSS 媒体功能 - monochrome

CSS 媒体功能 monochrome 用于确定用于表示输出设备的单色帧缓冲区中每个像素的位数。

媒体功能 monochrome 是一个范围功能，您可以使用最小单色和最大单色变体来查询最小值和最大值。

单色设备仅以一种颜色显示内容，通常是黑白，例如单色显示器、打印机、电子书阅读器,..等。

可能的值

<integer> − 此整数值表示分配给单色帧缓冲区中每个像素的位数。对于非单色设备，该值为零。

语法


monochrome: <integer>

CSS monochrome- 零值

以下示例演示如何使用媒体功能 monochrome 来定位值为 0 的非单色（彩色）设备。对于此类设备，元素的背景颜色更改为紫色 -


<html>
<head>
<style>
	 	.monochrome-box {
	 	 	 width: 150px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	}
	 	@media (monochrome: 0) {
	 	 	 .monochrome-box {
	 	 	 	 	background-color: violet;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="monochrome-box">CSS Media Feature Monochrome</div>
</body>
</html>

CSS monochrome- <integer>值

当媒体功能 monochrome 检测到每像素 3 位的单色帧缓冲区时，元素将具有紫色背景色。在其他设备上，该元素将具有粉红色的背景颜色。

这是一个例子 -


<html>
<head>
<style>
	 	.monochrome-box {
	 	 	 width: 150px;
	 	 	 height: 100px;
	 	 	 background-color: pink;
	 	}
	 	@media (monochrome: 3) {
	 	 	 .monochrome-box {
	 	 	 	 	background-color: violet;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="monochrome-box">CSS Media Feature Monochrome</div>
</body>
</html>

本页