prefers-reduced-transparency

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

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

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

语法

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

此示例默认有一个半透明框。如果您的设备上的辅助功能偏好设置中启用了减少透明度的设置，则半透明框会变得更不透明。

html

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

css

.translucent {
  opacity: 0.4;
}

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

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

此页面最后由 MDN 贡献者于 2025 年 10 月 14 日修改。