此页面由 Cloud Translation API 翻译。

CSS Preferreds-reduced-transparency

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

Adam Argyle

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

通过在浏览器中使用这种新的媒体查询，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 显示浅色、深色、透明和降低透明度的媒体查询这些图案是磨砂玻璃卡片的

</ph>

https://codepen.io/web-dot-dev/pen/dyaojxr