我在應用程序中使用了材質UI卡和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的上面、下面、里面、整個卡的外面，并使用不同的位置值，但是完全不能解決這個問題。MUI的測試版本在CardMedia上包含了一個覆蓋屬性，但是v1庫似乎沒有類似的東西。

有人知道如何正確地做到這一點嗎？提前感謝任何幫助！

您的CSS是關閉的，您將想要絕對定位styles.overlay，并確保卡片是相對位置的

試著這樣做:

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

如果你想要有一個像版本0中的卡片一樣的覆蓋，使用下面的代碼。記住將容器的位置設置為相對位置，這樣覆蓋的絕對位置才能生效:

<Card sx={{ maxWidth: 345 }}>
  <Box sx={{ position: 'relative' }}>
    <CardMedia
      component="img"
      height="200"
      image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
    />
    <Box
      sx={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: '100%',
        bgcolor: 'rgba(0, 0, 0, 0.54)',
        color: 'white',
        padding: '10px',
      }}
    >
      <Typography variant="h5">Lizard</Typography>
      <Typography variant="body2">Subtitle</Typography>
    </Box>
  </Box>
  {...}
</Card>