css给图片弄遮罩

1.想实现的效果

<div className={styles.mask_container}> <img src={item.img} alt="" /> </div>

 2.实现方法

你可以在 styles.css 文件中添加以下 CSS 代码来为 .mask_container 元素添加遮罩层：

.mask_container {
  display: inline-block;
  position: relative; /* 设置相对定位 */
}
.mask_container::before {
  content: '';
  display: block;
  position: absolute; /* 设置绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层颜色和透明度 */
  opacity: 0; /* 初始透明度为0（即不可见） */
  transition: opacity 0.3s ease-out; /* 设置过渡效果 */
  z-index: 1; /* 设置遮罩层比图片层级高 */
}
.mask_container:hover::before {
  opacity: 1; /* 鼠标移入时设置遮罩层透明度为1（即可见） */
}
这里我们使用伪元素 ::before 来创建遮罩层，其 position 属性设置为 absolute，定位到 .mask_container 元素上，然后调整其大小和透明度，最后设置过渡效果和层级关系即可。当鼠标移入时，我们通过设置 .mask_container:hover::before 来控制遮罩层的透明度实现遮罩效果。