通过语义 UI 在图像上添加文本

Question

我正在使用 Semantic UI 来显示一些图片。它工作正常，也可以在图像附近添加文本，但我想将文本放在图像上。如果可能，在图像的下半部分。

这是我的代码，图片上方有文字：

import { Grid, Image } from 'semantic-ui-react';
      
{data.map((element) => (
  <Grid.Column>
    <>
      <div>{element.name + ' ' + element.city}</div>
      <Image
        src={element.image}
      />
    </>
  </Grid.Column>
))}

有没有办法将 div 中的文字放在图片上？

Answer 1

您可以根据父项

设置div绝对位置

  <Grid.Column style={{ position: "relative", display: "flex"}}>
    <div style={{position: "absolute",bottom: 20}}>
      Name : City
    </div>
    <Image src={element.image} />
  </Grid.Column>

通过语义 UI 在图像上添加文本

Add text over Image from Semantic UI

javascript

html

css

reactjs

semantic-ui