css 遮罩

/* CSS 遮罩示例代码 */

/* 定义一个容器 */
.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
}

/* 遮罩层 */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  opacity: 0; /* 初始状态下遮罩是透明的 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

/* 当鼠标悬停在容器上时，显示遮罩 */
.container:hover .mask {
  opacity: 1; /* 鼠标悬停时遮罩变为不透明 */
}

解释说明：

• .container 是一个包含背景图片的容器。
• .mask 是一个绝对定位的遮罩层，初始状态下是透明的（通过 opacity: 0）。
• 当用户将鼠标悬停在 .container 上时，.mask 的 opacity 变为 1，从而显示遮罩效果。
• 使用了 transition 属性来平滑地改变遮罩的透明度。