Как добавить текст на фоновое изображение в reactjs

Question

import React from 'react'
import Tango from '../pics/argentine-tango.jpg'

const AboutPage = () => {
  return (
    <div>
      <em>Welcome to:</em> <h1><em>Dance Calendar app</em></h1>
      <ul>
        <li>Here you can save & comment your favourite ballrooms</li><br />
        <li>Look and & danceschools</li><br />
        <li>Look and & videolinks</li><br />
        <li>Look & mark calendar</li>
      </ul>
      <img src={Tango} alt="Tango Dancing" />
    </div>
  )
}

export default AboutPage

Какой самый простой способ поместить тексты в списке (4 элемента) на фоновое изображение в формате jsx? Я пробовал, например, встроенные стили, но не получилось.

Answer 1

Вы можете использовать position: absolute для текста и изображения и поместить их в контейнер с position: relative

import React from 'react'
import logo from './logo.svg'
import './App.css'

const App = () => {

  const style = {
    position: 'absolute',
    left: 0,
    top: 0,
  }

  const textItems = [
    'Here you can save & comment your favourite ballrooms',
    'Look and & danceschools',
    'Look and & videolinks',
    'Look & mark calendar',
  ]

  const containerStyle = {
    position: 'relative'
  }

  const mappedItems = textItems.map(item => <li key={item}>{item}</li>)

  return (
    <div style={containerStyle}>
      <img style={style} src={logo} alt='logo' width='200px' height='200px'/>
      <ul style={style}>
        {mappedItems}
      </ul>
    </div>
  )
}

export default App