Отображается ниже самого верхнего элемента в стеке по оси 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>Читайте также
Свойство perspective
Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умол...
Свойство
Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или...
Свойство list-style-image
Указывает адрес изображения, которое служит в качестве маркера списка....
Свойство outline-width
Указывает толщину внешней границы элемента.
В отличие от свойства border-width, для outline-width нельзя задать границу для каждой стороны элем...