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> ); } }。

.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;
}

...和CSS ...

{{1}}

该图层将根据需要永久保留。

Example

与Material-ui卡媒体反应，点击添加叠加

1 个答案: