昨天有读者私信我，为什么坚持写《现代CSS系列》文章？主要原因是小懒觉得 CSS 技术在不断发展，新特性不断涌现，老的特性不断被现代浏览器所支持，有太多的东西需要去学习。

本文将和大家一起学习一个新的媒体查询功能。

在 Chrome 浏览器 118 版本中已经支持 CSS Media Queries 5 的新媒体查询功能 prefers-reduced-transparency。不透明的界面可能会给各种视力缺陷的人带来困扰或者视觉困难。这就是为什么 Windows、macOS 和 iOS 的系统偏好设置中包含可以降低或移除用户界面透明度的原因。

1.prefers-reduced-transparency 介绍

prefers-reduced-transparency 用于检测用户是否在其设备上启用了减少设备上使用的透明或半透明图层效果的设置。对于某些用户来说，开启此类设置有助于提高对比度和可读性。

1）基本用法：

在上面的代码中，我们设置了 CSS 变量的不透明度值为 50%，然后使用 HSL 创建半透明的蓝色背景。媒体查询会检查用户对降低透明度的偏好，如果为真，则会将不透明度变量调整为 95%，基本不透明。

效果如下：

macOS 可以通过系统偏好设置 → 显示 → 显示器Tab 来调整降低透明度。

2) 兼容性：

prefers-reduced-transparency 还没有被所有现代浏览器所支持，具体如下：

2.prefers-reduced-transparency 使用场景

1）透明模态、通知和弹出窗口

通过媒体查询，可以实现对模态、通知及弹出窗口设置个性化样式。

2）自适应磨砂玻璃

另一种流行的图像叠加方式是磨砂玻璃。在下面的例子中，标题后面的图片是产品图片的镜面反射。这样做有几个好处：图像没有经过裁剪，最终效果中的明暗偏好会更明显一些。

3.Chrome DevTools 中调试

通过 DevTools → 更多工具 → Rendering → 切换 prefers-color-scheme 和 prefers-reduced-transparency。