如何创建 - 叠加
了解如何使用 CSS 创建叠加效果。
叠加
了解如何创建叠加效果:
Overlay
如何创建叠加效果
步骤 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">Overlay Text</div>
</div>
亲自试一试 »
