如何使用CSS为图像添加颜色覆盖

Question

im使用react、html、css和material ui

我试图在图像上点击时在存在和不存在的颜色覆盖之间切换。

下面是javascript：

const About = ({imgState, setImgState}) => {
const imgTracker = () => {
if(imgState === true){
setImgState(false);
}
else if(imgState===false){
setImgState(true);
}
}
...
<Box
className={imgState ? 'AboutImg active' : 'AboutImg notactive'}
component="img"
alt="face"
src={img2} 
onClick={imgTracker}      
/>

下面是css：

.MidSectionTop{
.MidSectionTopText{
}
.MidSectionImage{
.AboutImg{
height: calc(100vh * 4/12);
width: calc(100vw * 2/12);
&.active{
background: rgba(0, 197, 165, 0.5);

}
&.notactive{
background: none;
}
}
}
}

到目前为止，我的问题是图像覆盖在背景颜色之上。我试着给'&'赋予z索引；。"活动"类，但没有成功。格雷利非常感谢任何帮助！让我知道我还能提供什么

Answer 1

您可以使用所谓的伪元素(::before或::after(。

.AboutImg{
position: relative;
&::after{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
display:block;
content: '';
}
&.active::after{
background: rgba(0, 197, 165, 0.5);
}
&.notactive::after{
background: none;
}
}