MaterialUI卡覆盖

时间:2018-07-11 21:33:03

标签: css reactjs overlay material-ui

我在我的应用程序中使用了MaterialUI Card和CardMedia组件,但无法弄清楚如何在图像上方叠加文本。这是我正在尝试的简化示例:

<Card>
   <CardMedia image={this.props.preview} style={styles.media}/>
   <div style={styles.overlay}>
      this text should overlay the image
   </div>
</Card>


const styles = {
   media: {
      height: 0,
      paddingTop: '56.25%' // 16:9
   },
   overlay: {
      position: 'relative',
      top: '20px',
      left: '20px',
      color: 'black',
      backgroundColor: 'white'
   }
}

我尝试将文本div放置在CardMedia之上,之下,内部,整个Card外部,并使用不同的位置值,但根本无法弄清楚。 Beta版的MaterialUI在CardMedia上包含了overlay属性,但v1库似乎没有这样的内容。

有人知道如何正确执行此操作吗?预先感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

您的CSS已关闭,您将要绝对定位styles.overlay,并确保Card的位置relative

尝试这样的事情:

<Card style={styles.card}>
   <CardMedia image={this.props.preview} style={styles.media}/>
   <div style={styles.overlay}>
      this text should overlay the image
   </div>
</Card>


const styles = {
   media: {
      height: 0,
      paddingTop: '56.25%' // 16:9
   },
   card: {
      position: 'relative',
   },
   overlay: {
      position: 'absolute',
      top: '20px',
      left: '20px',
      color: 'black',
      backgroundColor: 'white'
   }
}