从 118 版本开始，Chrome 浏览器已经支持 CSS Media Queries 5 的新媒体查询功能 prefers-reduced-transparency。不透明的界面可能会给各种视力缺陷的人带来困扰或者视觉困难。这就是为什么 Windows、macOS 和 iOS 的系统偏好设置中包含可以降低或移除用户界面透明度的原因。
1.prefers-reduced-transparency 介绍
prefers-reduced-transparency 用于检测用户是否在其设备上启用了减少设备上使用的透明或半透明图层效果的设置。对于某些用户来说，开启此类设置有助于提高对比度和可读性。
1）基本用法：
body {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
