如何使用 CSS 实现黑色遮罩效果

最近在工作中遇见了一个需求，鼠标经过盒子出现黑色遮罩，遮罩中有相关的编辑按钮，点击以后，进行图片上传并且展示，由于当时没有思路，思考了好久，所以在完成开发后进行总结，使用的技术栈是React+less+Antd，过程和解答过程都在下边了

需求描述

初始化页面如下，其中图标和配图部分需要支持上传图片，上传完成后需要在最右侧进行展示，鼠标经过对应的上传上传图标盒子时，需要展示的效果如下

实现思路

我们直接看代码，如下

javascript 复制代码

// 触发头像图片选择
const handleImageClick = () => {
	fileInputRef.current.click();
};
// 处理头像图片上传
const handleImageChange = async event => {
  const file = event.target.files[0];
  let formData = new FormData();
  if (file) {
    const imageUrl = URL.createObjectURL(file);
    updateKey("logoPath",imageUrl)
    formData.append("file", file);
    try {
      const res = await upload(appid, formData);
      updateKey("logoPath", res.data)
    } catch (error) {
      console.log(error);
    }
  }
};
<div className="icon-wrapper" onClick={handleImageClick}>
  {/* 预览图片 */}
  <img
    src={changeImageFormat(addAllData?.logoPath) || icon}
    alt="icon"
    width={64}
    height={64}
    className="icon-img"
  />

  {/* 编辑按钮 */}
  <div className="overlay">
    <img
      src={edit}
      alt="edit"
      className="edit-icon"
      width={20}
      height={20}
    />
  </div>

  {/* 隐藏的文件上传按钮 */}
  <input
    type="file"
    ref={fileInputRef}
    style={{ display: "none" }}
    onChange={handleImageChange}
  />
</div>

javascript 复制代码

.icon-wrapper {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  cursor: pointer;

  .icon-img {
      margin-top: 4px;
      border-radius: 12px;
      object-fit: cover;
  }

  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      border-radius: 12px;
      margin-top: 4px;
      cursor: pointer;

      .edit-icon {
          width: 24px;
          height: 24px;
      }
  }

  &:hover .overlay {
      opacity: 1; // 鼠标悬停时显示
  }
}

逻辑部分

在外层icon-wrapper盒子上，绑定了handleImageClick方法，在这个方法中，来触发input的点击事件。接下来是我们需要展示的图片，接下来就是我们的遮罩盒子以及编辑图标，为了实现相应的点击效果，在下方使用了一个input来获取到本地上传图片的选择部分，然后通过handleImageChange方法进行图片的上传，到这里逻辑部分就结束了。

那么当鼠标经过的时候，如何实现相关的黑色遮罩以及编辑图标呢，这时候就要到我们的less文件中查看了。

样式实现

首先，给icon-wrapper盒子添加了一个相对定位，然后给我们的overlay盒子添加了一个绝对定位，同时给了一个0.4的黑色背景颜色以及一个transition为0.3s的缓入动画，但是现在还没有结束，还需要接入鼠标经过的变化，当鼠标经过的时候，将透明度改为1，这样就可以将黑色遮罩完全显示出来，我这边使用了less，&:hover .overlay，&符号的意思是，当前元素的父元素，所以这行代码的意思是，当鼠标停留在当前元素的父元素，也就是icon-wrapper上的时候，overlay盒子的透明度变为1。

这样，就实现了我们需要的效果了，如果你也需要实现类似的功能，希望可以帮到你！