1. Web
  2. CSS
  3. overlay

overlay

可用性有限

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

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

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: "Helvetica", "Arial", 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: transparent;
  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: transparent;
  }
}

我们要动画的两个属性是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来选择弹窗打开时的背景。

结果

代码渲染如下：

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

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

规范

规范
CSS 定位布局模块第 4 级
# overlay

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由MDN 贡献者于最后修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.