如何创建 - 叠加

❮ 上一节

下一节 ❯

如何创建 - 叠加

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

叠加

了解如何创建叠加效果:

Overlay

点击任意位置关闭叠加效果

开启叠加效果

如何创建叠加效果

步骤 1) 添加 HTML:

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

实例

步骤 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";}

亲自试一试 »

文字叠加效果

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

实例

亲自试一试 »

❮ 上一节

下一节 ❯