如何使用CSS伪元素实现图片标签的遮罩效果

使用CSS伪元素 `::before` 和 `::after` 可以轻松实现图片标签的遮罩效果。通常，我们会在一个 `img` 标签内创建一个新的层叠区域，并为其设置背景颜色、渐变或其他设计样式。这里是一个简单的示例：

/* 遮罩样式 */
.mask {
  position: relative; /* 保持元素定位以便添加伪元素 */
}

/* 使用伪元素作为遮罩 */
.mask::before {
  content: ""; /* 确保内容为空，不会显示字符 */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 或者设置成图片的实际高度和宽度 */
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩颜色及透明度 */
}

/* 如果需要特定形状的遮罩，可以调整伪元素的 border-radius 属性 */
.mask::before {
  border-radius: 50%; /* 对圆角图片生效 */
}

/* 如果需要渐变效果，可以使用 linear-gradient() 函数 */
.mask::before {
  background-image: linear-gradient(to right, transparent 50%, black 50%);
}

然后只需将 `.mask` 类应用到你的图片标签上即可：

<img src="your-image.jpg" class="mask">