CSS Overlay技巧

CSS overlay技巧是一种常用于添加半透明遮罩的CSS技术。这种遮罩可用于各种情况，如展示用户菜单、弹出框、图像等。

以下是使用CSS overlay技巧实现各种遮罩效果的示例，供程序员参考。

实现半透明遮罩

这是最简单的overlay效果示例。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

这个示例使用定位布局将遮罩定位在页面最上面，然后设置半透明的颜色为背景。

使用图片作为遮罩

这是另一个示例，使用一个图片作为遮罩。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(/path/to/image.png) no-repeat center center fixed;
  background-size: cover;
  opacity: 0.7;
}

这个示例使用了一个图片作为背景，并调整了透明度以达到半透明遮罩的效果。

实现点击关闭遮罩

这个示例演示了如何使用JavaScript在点击遮罩时关闭它。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.overlay.show {
  display: block;
}

.overlay.hide {
  display: none;
}

const overlay = document.querySelector('.overlay');

overlay.addEventListener('click', () => {
  overlay.classList.remove('show');
  overlay.classList.add('hide');
});

这个示例通过添加一个事件监听器，在单击遮罩时从DOM中删除遮罩。

实现带有文字的遮罩

这是一个带有文字的遮罩示例。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 2em;
}

.overlay p {
  max-width: 80%;
}

这个示例使用了Flex布局将内容垂直和水平居中，还设置了文本颜色和字体规模。

实现模糊效果的遮罩

这个示例演示了如何使用CSS模糊滤镜来实现模糊效果的遮罩。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/path/to/image.png);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(10px);
}

.overlay p {
  text-align: center;
  color: white;
  font-size: 2em;
}

这个示例使用了CSS滤镜来实现背景图像的模糊效果。