如何使用 Material UI Card 和 CardMedia 在背景图像上添加一些文本

Question

因此，我使用卡片组件来创建背景图像，但是，我不确定如何在图像上添加文本。可能还有更好的方法，我愿意接受其他想法。<Card>    <CardMedia        component="img"        alt={header.bg_img}        src={process.env.API_URL + header.bg_img.url}        title="Background Image"      />      <CardContent>           <h2 className={classes.h2}>{header.title}</h2>           <p className={classes.paragraph}>{header.small_description}</p>      </CardContent></Card>

Answer 1

<Card className={classes.root}>

  <CardMedia

    component="img"

    alt="Contemplative Reptile"

    height="200"

    image={Header}

    title="Contemplative Reptile"

  />

  <Typography

    gutterBottom

    variant="h1"

    component="h1"

    className={classes.font}

  >

    Weather

  </Typography>

</Card>

const useStyles = makeStyles(theme => ({

  root: {

    position: "relative"

  },

  font: {

    position: "absolute",

    top: "20%",

    width: "100%",

    textAlign: "center",

    color: "black",

    backgroundColor: "none",

    fontFamily: "Comic Sans MS"

  }

}));