Отображается ниже самого верхнего элемента в стеке по оси 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>Читайте также
Свойство background-size
Масштабирует фоновое изображение, согласно заданным размерам.
Мультилассы
К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте class ч...
Свойство page-break-inside
Разрешает или запрещает разрыв страницы внутри элемента при печати.
Правило @viewport
Позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров. Я...
Свойство backdrop-filter
Позволяет использовать визуальные эффекты. Так как это применяется ко всему за элементом, чтобы у...