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

Question

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

[图片] 1

代码：

标头.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;

标头.tsx

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

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

export default App;

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

Answer 1

您可以使用 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>
  )
}

然后在 header.css 中：

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

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

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

因此，例如 abottom:10px会将text-on-image其放置在 div 底部上方 10px 处，该 div 具有position: relative

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