Добавление текста поверх изображения в ReactJS по относительной высоте и ширине - PullRequest
Новая
       16

Добавление текста поверх изображения в ReactJS по относительной высоте и ширине

0 голосов
/ 13 мая 2019

Я пытаюсь следующий код, используя 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>

Я пытаюсь преобразовать указанный выше код в 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);

Но мне не удалось разместить текст сверху по центру изображения, как я это делал, используя базовые HTML и CSS. Может ли кто-нибудь помочь, обратите внимание, что я использую относительное положение при размещении текста в моих рабочих кодах HTML и CSS?

Edit: Я делаю это как учебное упражнение. Я ищу ответ, используя ReactJS и MaterialUI

1 Ответ

1 голос
/ 15 мая 2019

Как насчет того, чтобы просто добавить 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>        
    );
}

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

Результат: enter image description here

Конечно, «Ваш текст» может быть любым, в том числе реквизитом <Header> или потомками компонента заголовка.

...