Узнать, как создать эффект наложения используя HTML, CSS.
Наложение
Узнать, как создать эффект наложения:
Наложение
Создать наложение
Шаг 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>Попробуйте сами »