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

Question

So I've used the card component to create my background image however, I'm not sure how to add text on the image. There might be a better way as well, I'm open to other ideas.

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

Try it online: