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.