Как добавить текст на фоновое изображение с помощью 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"
  }
}));

Попробуйте онлайн: