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

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

需求描述

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

实现思路

我们直接看代码，如下

// 触发头像图片选择
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}>{/* 预览图片 */}<imgsrc={changeImageFormat(addAllData?.logoPath) || icon}alt="icon"width={64}height={64}className="icon-img"/>{/* 编辑按钮 */}<div className="overlay"><imgsrc={edit}alt="edit"className="edit-icon"width={20}height={20}/></div>{/* 隐藏的文件上传按钮 */}<inputtype="file"ref={fileInputRef}style={{ display: "none" }}onChange={handleImageChange}/>
</div>

.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。

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