在带有个人资料图片的栏按钮项上设置蒙版

<div class="profile-button">
  <img src="profile-image.jpg" alt="Profile Image">
  <div class="mask"></div>
</div>

.profile-button {
  position: relative;
  display: inline-block;
}

.profile-button img {
  width: 100px;
  height: 100px;
}

.profile-button .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; /* 添加过渡效果 */
}

.profile-button:hover .mask {
  opacity: 1; /* 鼠标悬停时显示蒙版 */
}