与 Material-ui 卡媒体反应，点击时添加覆盖

Question

可以将纯 HTLM、CSS 和 JavaScript 中的不透明彩色叠加层添加到图像中，但使用 Material-UI 时我遇到了一些问题。

<Card>
   <CardMedia>
      <img alt="" src={this.props.Webpull} />
   </CardMedia>    
</Card>

这将添加一张卡片并将图像嵌入其中。

当我单击图像 rgb(0,0,255,0.3) 时，如何在其顶部添加叠加层，并使叠加层永远保留？

谢谢！

Answer 1

如果我正确理解了问题，这就是您正在寻找的解决方案。该组件被包装在一个 中，div另一个div组件的类为layer。

class MyCard extends React.Component {
  imageClick = () => {
    this.refs.layer.style.display = "block";
  };
  render() {
    const { classes } = this.props;
    return (
      <Card>
        <div className="cardWrapper" onClick={this.imageClick}>
          <CardMedia
            alt="My cool img"
            component="img"
            className={classes.media}
            image="https://placeimg.com/100/100/nature"
          />
          <div className="layer" ref="layer">
            New layer
          </div>
        </div>
      </Card>
    );
  }
}

...和CSS...

.cardWrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.layer {
  position: absolute;
  background-color: rgba(0, 0, 255, 0.3);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}

该图层将按照您的意愿永久保留。

例子