CSS怎么寫全屏遮罩

在CSS中，我們可以使用全屏遮罩來創(chuàng)建一個覆蓋整個頁面的遮罩層，通常用于模態(tài)框、彈窗或背景模糊等場景，下面是一些實現(xiàn)全屏遮罩的CSS代碼示例：

1、使用偽元素創(chuàng)建全屏遮罩：

.modal-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.modal-open::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

2、使用背景模糊創(chuàng)建全屏遮罩：

.modal-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  filter: blur(10px);
}

3、使用CSS Grid創(chuàng)建全屏遮罩：

.modal-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}
.modal-open::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

這些示例展示了如何在CSS中實現(xiàn)全屏遮罩效果，你可以根據(jù)自己的需求選擇適合的方法。