prefers-reduced-transparency

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细检查 浏览器兼容性表。

prefers-reduced-transparency CSS 媒体特性 用于检测用户是否在设备上启用了设置以减少设备上使用的透明或半透明图层效果。 启用此类设置可以帮助某些用户提高对比度和可读性。

语法

no-preference

指示用户在设备上没有表明任何偏好。 此关键字值在布尔上下文中评估为 false。

reduce

指示用户已在设备上启用设置以最大限度地减少透明或半透明图层效果的数量。

用户偏好

各种操作系统都提供减少透明度的偏好，用户代理可能会依赖这些系统设置。 它们也可能依赖于在不提供特定设置的平台上的不太明确的信号。

  • 在 Windows 10/11 中：设置 > 个性化 > 颜色 > 透明效果。
  • 在 macOS 中：系统偏好设置 > 无障碍 > 显示 > 减少透明度。
  • 在 iOS 中：设置 > 无障碍 > 显示和文字大小 > 减少透明度。

示例

此示例默认情况下有一个半透明的框。 如果在设备上的无障碍偏好设置中启用了减少透明度的设置，则半透明的框会变得更加不透明。

HTML

html
<div class="translucent">translucent box</div>

CSS

css
.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

规范

规范
媒体查询级别 5
# prefers-reduced-transparency

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅