Псевдоэлемент CSS `::backdrop`

::backdrop — это CSS-псевдоэлемент, представляющий собой область размером с область просмотра. Он отображается непосредственно под любым элементом, помещённым в верхний слой.

Попробуйте

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());

Синтаксис

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

Описание

Подложки отображаются в следующих случаях:

• Элементы, переведённые в полноэкранный режим с помощью метода Fullscreen API Element.requestFullscreen().
• Элементы <dialog>, показанные в верхнем слое вызовом HTMLDialogElement.showModal().
• Элементы всплывающих окон, показанные в верхнем слое вызовом HTMLElement.showPopover().

Если в верхний слой помещено несколько элементов, у каждого из них есть собственный псевдоэлемент ::backdrop.

/* 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> открыт, мы переводим фокус на кнопку закрытия диалогового окна:

<dialog>
  <button autofocus>Close</button>
  <p>This modal dialog has a beautiful backdrop!</p>
</dialog>
<button>Show the dialog</button>

CSS

Мы задаём подложке фон, создавая красочный узор в виде бублика с помощью градиентов CSS:

::backdrop {
  background-image:
    radial-gradient(
      circle,
      white 0 5vw,
      transparent 5vw 20vw,
      white 20vw 22.5vw,
      #eeeeee 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().

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();
});

Результат

Спецификации

Совместимость с браузерами

См. также

• :fullscreen
• :xr-overlay
• модуль позиционированной раскладки CSS
• модуль псевдоэлементов CSS
• <dialog>
• глобальный атрибут HTML popover
• Fullscreen API
• Popover API