Блог

Главная - Вопросы по программированию - Наложение текста поверх изображения не работает?

Наложение текста поверх изображения не работает?

#javascript #reactjs #image #text

Вопрос:

Я пытаюсь наложить текст на изображение и тоже не могу понять, как это сделать. Это может быть простой вопрос, поэтому, если вы сможете более подробно рассказать о том, как это делается, я был бы вам очень признателен.

 import React from "react";
import { Typography } from "@material-ui/core";
import topImg from "/Users/rayhewitt/Desktop/react-portfolio/src/imgs/topImg.jpeg";
import useStyles from "./HeadStyles";

const Head = () => {
  const classes = useStyles();
  return (
    <div className={classes.top}>
      <img className={classes.image} src={topImg} alt="codingPic" />
      <Typography className={classes.intro} align="center">
        Hey, im Ray Hewitt a UI/UX frontend developer
      </Typography>
    </div>
  );
};

export default Head; 
 import { makeStyles } from "@material-ui/core";

export default makeStyles({
  top: {
backgroundColor: "rgba(8,89,145,255)",
height: "5000px",
  },
  image: {
paddingTop: "48px",
width: "100%",
zIndex: "100",
  },
  intro: {
justifyContent: "center",
position: "absolute",
zIndex: "101",
  },
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Ответ №1:

Быстро взглянув на свой код, кажется, что вы почти на месте. Я думаю, что единственное, чего не хватает, — это position: relative ваш родительский контейнер и позиция в тексте.

 .top {
  position: relative;
}

.text {
  position: absolute;
  top: 0; // or left/right/bottom
}

Этого должно хватить.

Здесь важно понять, что если у вас position: absolute есть элемент, то он будет придерживаться любого родителя по всему дереву position: relative или будет придерживаться тела, если его нет. Пометив родительский контейнер так position: relative , чтобы текст прилипал к этому родителю, затем вы можете управлять позиционированием сверху/снизу/слева/справа.

Примечание, я не уверен, что имеет смысл использовать justify-content , если текст не display: flex таков .

Комментарии:

1. Спасибо, это было очень проницательно. Я действительно думал, что был близок к этому. и содержание оправдания было просто попыткой, которую я удалил сразу после публикации этого вопроса. Отличное объяснение

Метки: