::backdrop

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

::backdrop CSS 伪元素是一个与视口大小相同的盒子,它会被渲染在任何顶层展示元素的下方。

尝试一下

语法

css
::backdrop {
  /* ... */
}

描述

背景遮罩(backdrop)在以下情况下会出现:

当多个元素被置于顶层时,每个元素都有自己的 ::backdrop 伪元素。

css
/* 背景遮罩只有通过 dialog.showModal() 打开对话框时会被显示 */
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}

元素被置于顶层的一个后进先出(LIFO)栈里。::backdrop 伪元素使得可以遮挡、样式化或完全隐藏位于顶层元素下方的所有内容。

::backdrop 既不继承自任何其他元素,也不会被任何其他元素继承。对于此伪元素可以应用哪些属性,没有限制。

示例

为模态对话框的背景遮罩添加样式

在此示例中,我们使用 ::backdrop 伪元素来为模态 <dialog> 打开时使用的背景遮罩添加样式。

HTML

我们包含一个 <button>,点击该按钮将打开包含的 <dialog>。当 <dialog> 打开后,我们将焦点给到关闭对话框的按钮上:

html
<dialog>
  <button autofocus>关闭</button>
  <p>这个模态对话框有一个漂亮的背景遮罩!</p>
</dialog>
<button>显示对话框</button>

CSS

我们为背景遮罩添加了背景,使用 CSS 渐变创建了一个色彩斑斓的甜甜圈效果:

css
::backdrop {
  background-image:
    radial-gradient(
      circle,
      #fff 0 5vw,
      transparent 5vw 20vw,
      #fff 20vw 22.5vw,
      #eee 22.5vw
    ),
    conic-gradient(
      #272b66 0 50grad,
      #2d559f 50grad 100grad,
      #9ac147 100grad 150grad,
      #639b47 150grad 200grad,
      #e1e23b 200grad 250grad,
      #f7941e 250grad 300grad,
      #662a6c 300grad 350grad,
      #9a1d34 350grad 400grad,
      #43a1cd 100grad 150grad,
      #ba3e2e
    );
}

JavaScript

对话框会使用 .showModal() 方法以模态形式打开,并使用 .close() 方法关闭。

js
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// “显示对话框”按钮会以模态打开对话框
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// “关闭”按钮会关闭对话框
closeButton.addEventListener("click", () => {
  dialog.close();
});

结果

规范

Specification
CSS Positioned Layout Module Level 4
# backdrop

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::backdrop
Support on dialog elements
Fullscreen support
Backdrop elements inherit their values from its originating element
Support on popovers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见