因此，我使用卡片組件來創建背景圖像，但是，我不確定如何在圖像上添加文本。可能還有更好的方法，我愿意接受其他想法。<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>
1 回答
SMILET
TA貢獻1796條經驗 獲得超4個贊
<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"
}
}));
- 1 回答
- 0 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消