针对偏好不透明界面的用户进行优化和调整。
从 Chrome 118 开始，可使用 CSS 媒体查询 5 中的新媒体查询功能 prefers-reduced-transparency。非不透明界面可能会引起头痛，或者因各种类型的视觉缺陷而造成视觉视觉障碍。因此，Windows、macOS 和 iOS 具有系统偏好设置，可以降低或移除界面的透明度。
通过在浏览器中使用这一新的媒体查询，CSS 可以调整界面，使用户想要降低透明度：
.example {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
在前面的代码示例中，CSS 变量在 50% 存储了不透明度值，该值随后与 HSL 一起使用，以创建半透明的蓝色背景。嵌套媒体查询会检查用户对降低透明度的偏好，如果为 true，则将不透明度变量调整为 95%（一个近乎不透明的值）。
此媒体查询非常适合其他偏好设置媒体查询，使设计人员和开发者既能发挥创造力，又能根据用户做出调整。您可以将这些媒体查询想象成汽车里的一把可自动调整位置到用户的椅子；当用户访问您的网站时，它会无需用户询问就能自动调整位置。太酷了。
降低透明度的使用场景
接下来的几个部分将重点展示以有意义的方式降低透明度的时机和机会。
图片上的半透明说明
一种比较常见的做法是，在图片或视频缩略图上叠加半透明字幕或摘要。以下示例说明了一种处理针对降低透明度的偏好设置的方法。叠加层被完全移除，相同的图片说明内容显示在图片下方，而不是叠加。
透明模态、通知和弹出式窗口
界面元素叠加内容（通常意味着存在不透明元素）的另一种方法是使用模态窗口、通知和弹出式窗口。在这些情况下，提高不透明度可以遵循用户的偏好设置，同时仍然允许从叠加层后面一窥微小的颜色。
.card {
background: hsl(none none 100% / 20%);
@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}
自适应磨砂玻璃
另一种流行的图像叠加层样式是磨砂玻璃。在以下示例中，说明背后的图片是产品图片的镜像反射。这样做有几个优点：图片不会被剪裁，并且在最终结果中可能会更偏重浅色或深色偏好。
.adaptive-glass {
--glass-lightness: 100%;
--glass-alpha: 50%;
background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
@media (prefers-reduced-transparency: reduce) {
--glass-alpha: 85%;
}
}
主标题
常见的首页元素会在循环视频或动画图片上叠加显示粗体的消息。以下示例包含一个彩色半透明渐变叠加层和一张无限动画背景图片。虽然这可能会吸引很多人的眼球，但由于其透明度和动作的对比度无法控制，因此也会给许多人带来问题。
这可以通过两个 CSS 媒体查询进行修复：prefers-reduced-motion 和 preferreds-reduced-transparency。在减少动作的媒体查询中，仅当用户“没有偏好”减少动作时，您才能应用无限动画，从而告知代码该用户可以进行动作。
此外，通过降低透明度的媒体查询，您可以降低不透明度，使叠加层颜色接近 100%。现在，您可以轻松阅读消息，而不会分散注意力，也没有有问题的对比度。
综上所述，您可以部署广告素材界面外观，同时确保目标受众群体能够阅读其中的内容并传达讯息。
.Hero img {
@media (prefers-reduced-motion: no-preference) {
animation: zoom 30s ease infinite;
}
}
.Hero .overlay {
background: hsl(none none 0% / 95%);
@media (prefers-reduced-transparency: no-preference) {
background: linear-gradient(
to top right in oklab,
oklch(40% 0.3 340 / 70%),
oklch(40% 0.4 200 / 70%)
);
}
}
关于用户偏好的加法与减法观点
前面的示例没有检查这些用户的偏好设置是否降低了偏好设置，而是检查了没有偏好设置。
@media (prefers-reduced-transparency: no-preference) {
…
}
开发者和设计人员通常会根据这些偏好，以减法的形式“回退”用户体验。这在媒体查询中表现为检查“减少”，此时界面中的某些内容将被移除。该示例展示了一种累加思维，如果用户同意的话，便会添加运动和透明度。
此方法可帮助您思考一种本身就牢固的健康基准体验。然后，如果同意用户接受，就向体验中添加内容。
开发者工具
Chrome 开发者工具可以模拟此偏好设置，以在“渲染”标签页中降低透明度（以及降低其他透明度）。在以下视频中，您可以了解如何切换 preferreds-color-scheme 和 refers-reduced-transparency 媒体查询，以展示磨砂玻璃卡片的浅色、深色、透明和低透明度变体。