Отображается ниже самого верхнего элемента в стеке по оси 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>Читайте также
Свойство grid
Свойство grid является сокращенной формой записи, которая устанавливает значения для всех явных с...
Функция repeating-radial-gradient()
По своему действию похож на радиальный градиент, который делается функцией <span class=&#...
Вывод контента после содержимого элемента
Псевдоэлемент, который используется для вывода контента после содержимого элемента, к которому он...
Свойство text-decoration
Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Однов...
Свойство transition-timing-function
Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого примен...