CSS 媒体特性 - 单色

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

monochrome 媒体特性是一个范围特性，您可以使用 min-monochrome 和 max-monochrome 变体来查询最小值和最大值。

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

可能的值

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

语法

monochrome: <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 monochrome - 零值

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

Open Compiler

<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 位的单色帧缓冲区时，元素将具有紫色背景颜色。在其他设备上，元素将具有粉红色背景颜色。

这是一个示例 -

Open Compiler

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

打印页面