Html 如何在ReactJS中的图像上添加文本？

我在学英语。今天我决定创建自己的博客。标题需要带有一些文本的图像。当试图在图像上添加文本时，文本会向下滑动。我需要将文字位置调整到中心位置

[图片]

代码：

Header.tsx

import React from "react";
import './header.scss'

const Header = () => {
  return (
    <header>
      <div className = "head-text">
        <div className = "head-image">
          <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
        </div>
          <h3> Welcome to my Blog </h3>
          <p> FREEEEDOM </p>
      </div>
    </header>
  )
}


export default Header;

import React from 'react';
import Header from './components/Header';
import './index.scss'

const App = () => {
  return (
    <>
      <Header />
    </>
  );
}

export default App;

从“React”导入React；
导入“./header.scss”
常量头=（）=>{
返回(
欢迎来到我的博客
自由王国

)
}
导出默认标题；

Header.tsx

import React from "react";
import './header.scss'

const Header = () => {
  return (
    <header>
      <div className = "head-text">
        <div className = "head-image">
          <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
        </div>
          <h3> Welcome to my Blog </h3>
          <p> FREEEEDOM </p>
      </div>
    </header>
  )
}


export default Header;

import React from 'react';
import Header from './components/Header';
import './index.scss'

const App = () => {
  return (
    <>
      <Header />
    </>
  );
}

export default App;

从“React”导入React；
从“./components/Header”导入标题；
导入“./index.scss”
常量应用=（）=>{
返回(
);
}
导出默认应用程序；

---

CSS文件是空的，所以我没有添加它们。

您可以执行以下操作：

<header>
  <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
  <h3> Welcome to my Blog </h3>
  <p> FREEEEDOM </p>
</header>

---

您可以使用CSS绝对定位在图像上添加文本。 你能读到它吗

将CSS类添加到要在图像上显示的文本中，例如：

const Header = () => {
  return (
    <header>
      <div className = "head-text">
        <div className = "head-image">
          <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
        </div>
          <div class='text-on-image'>
             <h3> Welcome to my Blog </h3>
             <p> FREEEEDOM </p>
          </div>
      </div>
    </header>
  )
}

这会将文本放置在图像的底部中心

具有相对位置的div是确定绝对位置（

图像上的文本）
右、左、下属性的div

因此，例如
bottom:10px
将使图像上的
文本
将其自身放置在div的底部上方10px，该div具有
位置：relative

使用CSS绝对位置值将其放置在您想要的位置。
更多例子

上面提到的颜色将是文本的颜色

.center__text{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

现在，文本将显示在图像的中心

.center__text{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}