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

将文本放在jsx背景图像上的列表（4个项）中的最简单方法是什么？我尝试了例如内联样式，但没有成功。

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

如何在React.js中的背景图像上添加文本

1 个答案: