CSS prefers-reduced-transparency与模态半透明颜色实例页面

回到相关文章 »

效果：

如何测试？先点击按钮，观察模态背景的黑色半透明度是不是50%，Chrome控制台Rendering选项卡开启prefers-reduced-transparency:reduce，然后再次点击按钮（弹框已开启，此步骤可忽略），观察黑色背景的透明度。

我是模态框，看看背景的半透明是多少？

代码：

CSS代码：
dialog::backdrop {
  --opacity: .5;

  background: rgba(0 0 0 / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}
HTML代码：
<button 
  onClick="dialog.showModal();"
>点击我</button>

<dialog 
  id="dialog" 
  onclick="this.close()"
>我是模态框，看看背景的半透明是多少？</dialog>