css - MUI 卡片文字叠加

Question

我在我的应用程序中使用 MUI 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 外面，并使用不同的位置值，但根本无法解决这个问题。 MUI 的 beta 版本在 CardMedia 上包含一个覆盖属性，但 v1 库似乎没有类似的东西。

任何人都知道如何正确地做到这一点？在此先感谢您的帮助!

Answer 1

您的 CSS 已关闭，您需要绝对定位 styles.overlay，并确保 Card 位于 relative 位置/p>

尝试这样的事情:

<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'
   }
}