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

【问题标题】：How can I add some text on a background image with Material UI Card and CardMedia如何使用 Material UI Card 和 CardMedia 在背景图像上添加一些文本
【发布时间】：2020-03-17 13:29:47
【问题描述】：

所以我使用卡片组件来创建我的背景图像，但是我不确定如何在图像上添加文本。可能还有更好的方法，我对其他想法持开放态度。

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

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案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"
  }
}));

在线试用：

【讨论】：