Отображается ниже самого верхнего элемента в стеке по оси Z
Описание
Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно ::backdrop применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.
В настоящее время работает только с модальными окнами, созданными с помощью элемента dialog.
Синтаксис
Селектор::backdrop { content: 'текст' }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
dialog {
width: 300px;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
</style>
<button id='openDialog'>Вход на сайт</button>
<dialog>
<form id='authentication'>
<p><input name='login' required autofocus placeholder='Логин' /></p>
<p><input type='password' name='pass' required placeholder='Пароль' /></p>
<p>
<button type='submit'>Войти</button>
<button id='closeDialog'>Закрыть окно</button>
</p>
</form>
</dialog>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#openDialog').onclick = function () {
dialog.showModal();
};
document.querySelector('#closeDialog').onclick = function () {
dialog.close();
};
</script>
</body>
</html>Читайте также
Стиль для всего элемента, получающего фокус
Псевдокласс :focus-within определяет стиль для всего элемента, получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливае...
Свойство padding-block-end
Определяет конечный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-end может соотв...
Свойство text-shadow
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может ра...
Свойство flex
Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты...