如何創建：覆蓋層效果

學習如何使用 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>

親自試一試