反转颜色

**inverted-colors** CSS 媒体特性 用于测试 用户代理 或底层操作系统是否反转了所有颜色。

颜色反转可能会产生不良的副作用，例如阴影变成高光，这会降低内容的可读性。使用此媒体特性，您可以检测到是否正在发生反转，并根据需要对内容进行样式设置，同时尊重用户偏好。

语法

css
/* Keyword value */
@media (inverted-colors: inverted) {
  /* styles to apply if inversion of colors is detected */
}

inverted-colors 特性指定为以下关键字值之一

none

表示颜色正常显示，没有发生颜色反转。此关键字值评估为 false。

inverted

表示显示区域内的所有像素都已反转。此关键字值评估为 true。

示例

检测到颜色反转后应用样式

此示例演示了 inverted-colors 媒体特性关键字值的两种效果以及不支持 inverted-colors 媒体特性时的效果。

HTML

html
<p>
  If color inversion is detected, this text will appear blue on white (the
  inverse of yellow on black) along with a line over the text. If no color
  inversion is happening, the text will appear red on light gray without the
  line over the text.
</p>
<p>
  If the text is gray and no overline is present, it means your browser doesn't
  support the
  <code>inverted-colors</code> media feature.
</p>

CSS

css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
    text-decoration: overline;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}

结果

规范

规范
媒体查询级别 5
# inverted

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅