::backdrop

::backdrop CSS 伪元素 是一个与 视口 大小相同的盒子，它渲染在任何位于 顶层 中呈现的元素的正下方。

试一试

语法

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

描述

背景出现在以下情况中

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

css
/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}

元素以后进先出 (LIFO) 的方式堆叠在顶层。::backdrop 伪元素使得可以遮蔽、设置样式或完全隐藏位于顶层元素下方的所有内容。

::backdrop 既不继承自任何其他元素，也不被任何其他元素继承。对该伪元素应用哪些属性没有限制。

示例

设置模态对话框的背景样式

在此示例中，我们使用 ::backdrop 伪元素来设置当模态 <dialog> 打开时使用的背景样式。

HTML

我们包含一个 <button>，当单击时，将打开包含的 <dialog>。当 <dialog> 打开时，我们将焦点设置到关闭对话框的按钮上。

html
<dialog>
  <button autofocus>Close</button>
  <p>This modal dialog has a beautiful backdrop!</p>
</dialog>
<button>Show the dialog</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");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

结果

规范

规范
CSS 定位布局模块级别 4
# 背景

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅