如何创建：覆盖层效果

学习如何使用 CSS 创建覆盖层效果（一种叠加效果）。

如何创建覆盖层效果

第一步 - 添加 HTML：

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

<div id="overlay"></div>

第二步 - 添加 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; /* 添加悬停时的鼠标指针 */
}

第三步 - 添加 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>

亲自试一试