叠加

---

了解如何使用 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> 亲自试一试 »