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

如何解决如何在ReactJS中在图像上添加文本？

我正在学习ReactJS。今天，我决定创建自己的博客。标头需要带有一些文本的图像。当试图在图像上添加文本时，文本会向下滑动。我需要将文字位置居中

[image] 1

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;

Header.tsx

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

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

export default App;

CSS文件为空，因此我没有添加它们。

解决方法

您可以执行以下操作：

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

header {
  position: relative;
  text-align: center;
  padding-top: 25px;
}
header img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

您可以使用CSS绝对定位在图像上添加文本。可以阅读here

将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>
  )
}

然后在header.css中输入

：

.head-text {
   position: relative;
}
.text-on-image {
  position: absolute;
  right: 50%;
  left: 50%;
  bottom: 15%;
}

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

具有相对位置的div是确定绝对位置（text-on-image）right,left,bottom属性的div。

因此，例如，bottom:10px会使text-on-image自行放置在具有position: relative的div底部上方10像素处

播放CSS绝对位置值，以将其放置在所需的位置。更多示例here

SELECT TE.value AS GroupID,ISNULL(TM.TotalCount,0) AS GroupCount
FROM #tblWorkQueueDocuemnt TM
RIGHT OUTER JOIN (
    SELECT CONVERT(INT,value) AS value
    FROM STRING_SPLIT('1,2,3,4',',')
    ) TE ON TM.GroupID = TE.value

您可以这样做

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

上面提到的

颜色将是您文本的颜色

.head-text{
position: relative;
color: white;

现在，您的文字将显示在图片的中心