目 录CONTENT

文章目录

CSS prefers-reduced-transparency 一个支持降低透明度的新媒体查询特性!

Hello!你好!我是村望~!
2023-10-27 / 0 评论 / 0 点赞 / 234 阅读 / 454 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

CSS prefers-reduced-transparency

最新的developer.chrome发布了支持css降低透明度的新媒体查询功能 Preferred-reduced-transparency

Windows、macOS 和 iOS在系统设置中 具有可以降低或消除 UI 透明度的系统首选项。

如果同时想让我们页面也支持我们的降低透明度的效果,就可以使用 Preferred-reduced-transparency

通过浏览器中的这种新媒体查询,CSS 可以为指定希望降低透明度的用户调整界面

我们先来看看系统中的降低透明度的效果

iShot_2023-10-27_13.05.40

下面我们来使用这个Css来看看,当系统设置的降低透明度开启后,对页面的影响效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>prefers-reduced-transparency</title>
  </head>
  <style>
    .example {
      --opacity: 0.5;
      width: 100px;
      height: 100px;
      background: hsl(200 100% 50% / var(--opacity));

      @media (prefers-reduced-transparency: reduce) {
        --opacity: 0.95;
      }
     
    }
    img {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        z-index: -1;
      }
  </style>
  <body>
    <div class="example"></div>
    <img
      src="http://qiniuyun.quancundexiwang.wang/202310271310571.jpeg?imageView2/0/q/50"
    />
  </body>
</html>

这里准备了一个默认透明的box,通过绝对定位的方式在box的上层放了一张文字图片!

image-20231027131350352

由于盒子有一定的透明度,我们还是可以很清楚的看到下面图片上的文字的

当在系统中开启降低透明度后

iShot_2023-10-27_13.14.36

可以看到,Css媒体查询可以识别到系统的降低透明度!然后将透明度按照我们媒体查询的设置从0.5-> 0.95

image-20231027131711845

0

评论区