叠加层

可用性有限

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

overlay CSS 属性指定出现在顶层的元素（例如，显示的弹出窗口或模态 <dialog> 元素）是否实际渲染在顶层。此属性仅在 transition-property 值列表内相关，并且仅当将 allow-discrete 设置为 transition-behavior 时。

重要的是要注意，overlay 只能由浏览器设置——作者样式不能更改任何元素的 overlay 值。但是，您可以将 overlay 添加到设置在元素上的过渡属性列表中。这会导致它从顶层移除被延迟，以便它可以被动画化，而不是立即消失。

注意： 当过渡 overlay 时，您需要在过渡上设置 transition-behavior: allow-discrete，以便它可以动画化。overlay 动画与正常的离散动画不同，因为可见（即 auto）状态始终会在过渡的整个持续时间内显示，无论它是开始状态还是结束状态。

语法

css

/* Keyword values */
overlay: auto;
overlay: none;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

值

auto: 如果元素被提升到顶层，则该元素将渲染在顶层。
none: 该元素不会渲染在顶层。

正式定义

初始值	`none`
应用于	所有元素
继承	否
计算值	如指定
动画类型	离散行为，除非动画到或来自 `none` 在整个持续时间内可见

正式语法

overlay = 
  none  |
  auto

示例

在此示例中，一个弹出窗口在过渡从隐藏到显示以及从显示到隐藏时进行动画化。

HTML

HTML 包含一个使用 popover 属性声明为弹出窗口的 <div> 元素，以及一个使用其 popovertarget 属性指定为弹出窗口显示控件的 <button> 元素。

html

<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

overlay 属性仅存在于过渡属性列表中。由于 overlay 是一个用户代理控制的属性，因此它不会在过渡前或过渡后状态中声明。

css

html {
  font-family: Arial, Helvetica, sans-serif;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;

  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition:
    opacity 0.7s,
    transform 0.7s,
    overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Needs to be included after the previous [popover]:popover-open
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

/* Transition for the popover's backdrop */

[popover]::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* Nesting selectors (&) cannot represent pseudo-elements, so this 
   starting-style rule cannot be nested. */

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

我们要动画化的两个属性是 opacity 和 transform：我们希望弹出窗口在水平方向上放大和缩小同时淡入淡出。我们为弹出窗口元素的默认隐藏状态（通过 [popover] 选择）设置这些属性的起始状态，并在弹出窗口的打开状态（通过 :popover-open 伪类选择）设置结束状态。然后，我们设置一个 transition 属性来在两者之间进行动画。

因为动画元素在显示时被提升到顶层，在隐藏时从顶层移除，所以 overlay 被添加到过渡元素列表中。这确保了元素从顶层移除的操作会延迟到动画结束。对于像这样简单的动画，这不会造成很大的影响，但在更复杂的情况下，如果不这样做会导致元素过快地从覆盖层中移除，这意味着动画不流畅或无效。请注意，transition-behavior: allow-discrete 值也在速记中设置，以启用离散过渡。

要使动画在两个方向上都能正常工作，还需要以下步骤

动画的起始状态在 @starting-style at-rule 中设置。这是为了避免出现意外的行为。默认情况下，过渡不会在元素的第一次样式更新时触发，或者当 display 类型从 none 更改为其他类型时触发。@starting-style 允许您以特定可控的方式覆盖该默认值。如果没有它，进入动画将不会发生，弹出窗口只会出现。
display 也被添加到过渡元素列表中，以便动画元素在进入和退出动画期间都可见（设置为 display: block）。如果没有它，退出动画将不可见；实际上，弹出窗口只会消失。同样，在这种情况下，需要 transition-behavior: allow-discrete 才能使动画发生。

您会注意到，我们还在弹出窗口打开时出现在其后面的 ::backdrop 上添加了过渡，以提供一个不错的变暗动画。[popover]:popover-open::backdrop 需要在弹出窗口打开时选择背景。

结果

代码渲染如下

注意： 因为弹出窗口每次显示时都会从 display: none 更改为 display: block，所以弹出窗口每次进入过渡发生时，都会从其 @starting-style 样式过渡到其 [popover]:popover-open 样式。当弹出窗口关闭时，它会从其 [popover]:popover-open 状态过渡到默认的 [popover] 状态。

在这种情况下，进入和退出时的样式过渡可能是不同的。请查看我们的起始样式使用情况演示示例，以证明这一点。

规范

规范
CSS 定位布局模块级别 4 # 叠加层

浏览器兼容性

BCD 表仅在浏览器中加载

叠加层