Здесь вы узнаете, как сделать эффект "оверлея" или наложения при помощи CSS и JavaScript.
Оверлей
Как сделать эффект оверлея
Шаг 1) Добавляем HTML:
Используем любой эллемент и помещаем его в любом месте в документе:
Пример
<div id="overlay"></div>
Шаг 2) Добавляем CSS:
Определяем стили оверлейного элемента:
Пример
#overlay {
position: fixed; /* Поместить поверх содержимого страницы */
display: none; /* Скрываем по умолчанию */
width: 100%; /* Полная ширина (на всю страницу) */
height: 100%; /* Полная высота (на всю страницу) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Черный прозрачный фон */
z-index: 2; /* Определяем порядок в стеке, если вы используете разный порядок для других элементов */
cursor: pointer; /* Добавляем курсор при наведении */
}
Шаг 3) Добавляем JavaScript:
Используем JavaScript, чтобы включать и выключать эффект оверлея:
Пример
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
Эффект оверлея с текстом
Внутри оверлея можно поместить все, что угодно. В следующем примере мы добавляем текст в середину страницы:
Пример
<style>
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
<div id="text">Текст оверлея</div>
</div>
