我在我的应用程序中使用了MaterialUI Card和CardMedia组件,但无法弄清楚如何在图像上方叠加文本。这是我正在尝试的简化示例:
<Card>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
overlay: {
position: 'relative',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
我尝试将文本div放置在CardMedia之上,之下,内部,整个Card外部,并使用不同的位置值,但根本无法弄清楚。 Beta版的MaterialUI在CardMedia上包含了overlay属性,但v1库似乎没有这样的内容。
有人知道如何正确执行此操作吗?预先感谢您的帮助!
答案 0 :(得分:2)
您的CSS已关闭,您将要绝对定位styles.overlay
,并确保Card
的位置relative
尝试这样的事情:
<Card style={styles.card}>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
card: {
position: 'relative',
},
overlay: {
position: 'absolute',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}