CSS媒体特性 - 颜色

CSS媒体特性color测试输出设备每个颜色分量（如红色、绿色和蓝色）的比特数。

CSS颜色媒体是一个范围特性，这意味着你也可以使用前缀min-color和max-color变体分别查询最小值和最大值。

可能的值

<integer> − 它定义了用于表示输出设备可以显示的各个颜色（例如红色、绿色和蓝色）的比特深度。

语法

   @media (color:<integer>) {
      //css style
   }

表示颜色分量时，它使用表示每个颜色分量所需的最小比特数。一个对蓝色和红色使用5位，对绿色使用6位的显示器被认为每个颜色分量有5位。如果显示器使用索引颜色，则它使用表示颜色表中颜色的最小比特数。

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

CSS颜色 - 基本示例

下面的示例演示了CSS color媒体特性，如果输出设备可以显示超过0种颜色，则将<p>元素的文本颜色更改为红色−

Open Compiler

<html>
<head>
<style>
   div {
      color: blue;
      background-color: yellow;
   }
   @media (color) {
      div {
         color: red;
      }
   }
</style>
</head>
<body>
   <div>
      <h2>CSS Media Query</h2>
      <p>This is an example of CSS media queries with the "color" media feature.</p>
   </div>
</body>
</html>

CSS颜色 - <integer>值

下面的示例演示了color <= 10媒体特性，h2元素默认将具有蓝色文本颜色−

当设备上可用的每个颜色分量的比特数小于或等于10时，它会将文本颜色更改为红色，背景颜色更改为黄色。

Open Compiler

<html>
<head>
<style>
   h2 {
      color: blue;
   }
   @media (color <= 10) {
      h2 {
         color: red;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>

CSS颜色 - max-color属性

下面的示例演示了max-color: 8媒体特性，h2元素默认将具有粉色背景和蓝色文本颜色−

当设备上可用的每个颜色分量的比特数小于或等于8时，它会将文本颜色更改为绿色，背景颜色更改为黄色。

Open Compiler

<html>
<head>
<style>
   h2 {
      background-color: pink;
      color: black;
   }
   @media (max-color: 8) {
      h2 {
         background-color: yellow;
         color: green;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>

CSS颜色 - min-color属性

下面的示例演示了min-color: 4媒体特性，h2元素默认将具有粉色背景和蓝色文本颜色−

当设备上可用的每个颜色分量的比特数大于或等于4时，它会将背景颜色更改为紫色。

Open Compiler

<html>
<head>
<style>
   h2 {
      background-color: pink;
      color: black;
   }
   @media (min-color: 4) {
      h2 {
         background-color: violet;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>

打印页面