CSS ::backdrop All In One

CSS ::backdrop All In One

dialog

/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

dialog tag

When using HTMLDialogElement.showModal() to open a <dialog>, focus is set on the first nested focusable element.
使用 HTMLDialogElement.showModal() 打开 <dialog> 时，焦点设置在第一个嵌套的可聚焦元素上。

The ::backdrop CSS pseudo-element can be used to style the backdrop that is displayed behind a <dialog> element when the dialog is displayed with HTMLDialogElement.showModal().
For example, to dim unreachable content behind the modal dialog.

当使用 HTMLDialogElement.showModal() 显示对话框时，::backdrop CSS 伪元素可用于设置显示在 <dialog> 元素后面的背景的样式。
例如，使模态对话框后面无法访问的内容变暗。

Because this dialog was opened via the open attribute, it is non-modal.
因为这个对话框是通过 open 属性打开的，所以它是非模态的。

Opening dialogs via HTMLDialogElement.show() is preferred over the toggling of the boolean open attribute.
通过 HTMLDialogElement.show() 打开对话框优于布尔 open 属性的切换。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show

:modal

https://developer.mozilla.org/en-US/docs/Web/CSS/:modal

https://codepen.io/xgqfrms/pen/oNPWvdK

https://codepen.io/xgqfrms/pen/oNPWvQv?editors=1011

demos

video

video::backdrop {
  background-color: #448;
}

https://mdn.github.io/css-examples/backdrop/index.html

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---