此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
::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 |
浏览器兼容性
Loading...
参见
:fullscreen伪类<dialog>HTML 元素- 全屏 API
popoverHTML 全局属性- 弹出框 API