::backdrop
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.
* Some parts of this feature may have varying levels of support.
尝试一下
button { font-size: 1.2rem; padding: 5px 15px; } dialog::backdrop { background-color: salmon; } <button id="showDialogBtn">Show a dialog</button> <dialog id="favDialog"> <form method="dialog"> <p>The background shown outside of this dialog is a backdrop.</p> <button id="confirmBtn">Close the dialog</button> </form> </dialog> const showDialogBtn = document.getElementById("showDialogBtn"); const favDialog = document.getElementById("favDialog"); showDialogBtn.addEventListener("click", () => favDialog.showModal()); 语法
css
::backdrop { /* ... */ } 描述
背景遮罩（backdrop）在以下情况下会出现：
- 使用全屏 API 的
Element.requestFullscreen()方法将元素置于全屏模式时。 - 通过
HTMLDialogElement.showModal()调用在顶层显示<dialog>元素。 - 通过
HTMLElement.showPopover()调用在顶层显示弹出框元素。
当多个元素被置于顶层时，每个元素都有自己的 ::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 |
浏览器兼容性
参见
:fullscreen伪类<dialog>HTML 元素- 全屏 API
popoverHTML 全局属性- 弹出框 API