在ReactJS中通过相对高度和宽度在图像上添加文本

Question

在ReactJS中通过相对高度和宽度在图像上添加文本

我正在尝试使用 HTML 和 CSS 编写以下代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}


.top-asad {
color: blue;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}



</style>
</head>
<body>

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png" alt="Snow" style="width:100%;">  
  <div class="top-asad">Top Left</div>  
</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我正在尝试使用以下代码将上面的代码转换为 ReactJS：

import React from "react"
import CardMedia from '@material-ui/core/CardMedia';
import { withStyles } from '@material-ui/core/styles';
import CardActionArea from '@material-ui/core/CardActionArea';
import { Card, CardContent } from "@material-ui/core";

const styles = theme => ({
    card: {
        display: 'flex',
      },
      details: {
        display: 'flex',
        flexDirection: 'column',
      },
      content: {
        flex: '1 0 auto',
      },
      cover: {
        width: 151,
      },
      controls: {
        display: 'flex',
        alignItems: 'center',
        paddingLeft: theme.spacing.unit,
        paddingBottom: theme.spacing.unit,
      },
      container: {
        position: 'relative',
        textAlign: 'center',
        color: 'white',
      },
      topasad: {
        color: 'blue',
          position: 'absolute',
          top: '10%',
          left: '50%',
        },

    media: {
        display: 'flex',
        height: 100,
        objectFit: 'contain',
        alignItems: 'left',

    },
  })

function Header(props) {
    const { classes } = props;
    return (  
            <Card className={classes.card}>
                <div className={classes.con}>
                    <CardContent className={classes.content}>
                        <CardMedia
                            component="img"
                            className={classes.media}
                            image="http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png"
                        />


                    </CardContent>

                </div>                
            </Card>        
    )
}

// export default Header
export default withStyles(styles)(Header);

Run Code Online (Sandbox Code Playgroud)

但我无法像使用基本 HTML 和 CSS 那样将文本放置在图像的顶部中心。有人可以帮忙吗，请注意我在工作 HTML 和 CSS 代码中放置文本时使用相对位置？

编辑：我这样做是为了学习练习。我正在使用 ReactJS 和 MaterialUI 寻求答案

Answer 1

jer*_*red 8

是否只需在标头中添加一个 div 来包裹<CardMedia>、设置一些样式并包含您想要居中的文本？

function Header(props) {
    const { classes } = props;
    return (  
            <Card className={classes.card}>
                <div className={classes.con}>
                    <CardContent className={classes.content}>
                      <div style={{position: 'relative'}} >
                        <CardMedia
                            component="img"
                            className={classes.media}
                            image="https://www.w3schools.com/css/img_lights.jpg"
                        />
                        <div style={{
                          position: 'absolute', 
                          color: 'white', 
                          top: 8, 
                          left: '50%', 
                          transform: 'translateX(-50%)'
                        }} >Your text</div>
                      </div>
                    </CardContent>
                </div>                
            </Card>        
    );
}

Run Code Online (Sandbox Code Playgroud)

https://stackblitz.com/edit/react-b7esqk

结果：

当然，“您的文本”可以是您想要的任何内容，包括标题组件的支柱<Header>或子组件。

归档时间：	6 年，6 月前
查看次数：	8046 次
最近记录：	6 年，6 月前