操作方法 - 叠加

了解如何使用 CSS 创建叠加效果。

覆盖

了解如何创建叠加效果：

覆盖

单击任意位置可关闭叠加效果

如何创建叠加效果

步骤1）添加HTML：

使用任何元素并将其放置在文档中的任何位置：

示例

步骤2）添加CSS：

设置覆盖元素的样式：

示例

#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}

步骤 3) 添加 JavaScript：

使用 JavaScript 打开和关闭叠加效果：

示例

function on() {
document.getElementById("overlay").style.display = "block";
}

function off() {
document.getElementById("overlay").style.display = "none";
}

亲自试一试 »

与文字叠加效果

在叠加层中添加您想要的任何内容，并将其放置在您想要的位置。在此示例中，我们在页面中间添加文本：

示例

亲自试一试 »