在react中将文本覆盖在循环内的图像之上

import React from 'react';

class ImageOverlay extends React.Component {
  render() {
    const data = [
      { image: 'image1.jpg', text: 'Text 1' },
      { image: 'image2.jpg', text: 'Text 2' },
      { image: 'image3.jpg', text: 'Text 3' },
    ];

    return (
      <div>
        {data.map((item, index) => (
          <div key={index} className="image-container">
            <img src={item.image} alt="Image" className="image" />
            <div className="text">{item.text}</div>
          </div>
        ))}
      </div>
    );
  }
}

export default ImageOverlay;

.image-container {
  position: relative;
  display: inline-block;
}

.image {
  width: 200px;
  height: 200px;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}