CSS Preferreds-reduced-transparency

针对喜欢不透明界面的用户进行优化和调整。

Adam Argyle

从 Chrome 118 开始，我们推出了新的媒体查询功能 prefers-reduced-transparency CSS 媒体查询 5 中的 可用。非透明接口可能会引起头痛， 各种视觉缺陷正因如此，Windows、macOS 和 iOS 应用都有系统偏好设置 可能会降低或消除界面的透明度

通过在浏览器中使用这种新的媒体查询，CSS 可以针对用户调整界面 表明希望降低透明度：

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

在前面的代码示例中，CSS 变量在 50% 处保持不透明度值。 再与 HSL 结合使用，生成半透明的蓝色背景。通过 nested 媒体查询，用于检查 降低透明度，如果为 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 媒体查询解决此问题： 首选减少运动 以及 refers-reduced-transparency在减少动作的媒体查询中，您可以 仅当用户拥有“no-preference”时，才应用无限动画以享受优惠 动作，向代码表明该用户可以有动作。

此外，借助降低透明度的媒体查询，您还可以降低 使叠加层颜色接近 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 开发者工具可以模拟此偏好设置，以降低透明度（并且 更多）。在下面的视频中 看看如何切换 preferences-color-scheme 和 preferreds-reduced-transparency 显示浅色、深色、透明和降低透明度的媒体查询 这些图案是磨砂玻璃卡片的