如何使用 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}>&nbsp; <CardMedia&nbsp; &nbsp; component="img"&nbsp; &nbsp; alt="Contemplative Reptile"&nbsp; &nbsp; height="200"&nbsp; &nbsp; image={Header}&nbsp; &nbsp; title="Contemplative Reptile"&nbsp; />&nbsp; <Typography&nbsp; &nbsp; gutterBottom&nbsp; &nbsp; variant="h1"&nbsp; &nbsp; component="h1"&nbsp; &nbsp; className={classes.font}&nbsp; >&nbsp; &nbsp; Weather&nbsp; </Typography></Card>const useStyles = makeStyles(theme => ({&nbsp; root: {&nbsp; &nbsp; position: "relative"&nbsp; },&nbsp; font: {&nbsp; &nbsp; position: "absolute",&nbsp; &nbsp; top: "20%",&nbsp; &nbsp; width: "100%",&nbsp; &nbsp; textAlign: "center",&nbsp; &nbsp; color: "black",&nbsp; &nbsp; backgroundColor: "none",&nbsp; &nbsp; fontFamily: "Comic Sans MS"&nbsp; }}));