Javascript 制作一个包含背景图像的材质UI网格列表

我有一个网格列表，其中有一堆图片，我正在从外部服务检索这些图片。这用于创建图像库。这些图像会定期更新，因此图像库每次看起来都不一样

如何将图像库转换为灰度，甚至使其透明，然后将其用作背景，以便将内容放在图像库的顶部？我想能够把文本框，图像上的图像画廊的顶部

这就是我目前所拥有的

<GridList cols={3}>
{
this.state.images.map(image => (
      <GridListTile
        rows={1}
        ref={this.imageRef}
        key={image.id}
        style={{ padding: 0 }}
      >
        <img src={image.urls.regular} alt={image.alt_description} />
      </GridListTile>
    ))
}
</GridList>

{
this.state.images.map（image=>(
))
}

这就是我的UI目前的样子：

我的问题是

Hello World

文本。如图所示，它位于左下角。我想把文本放在中间，把图像的网格列表变成透明或灰度的背景

我的最终目标是能够在图像网格列表的顶部添加其他材质UI组件。基本上，我将图片列表作为背景，这样我就可以将其他内容放在上面

---

我已经尝试将

z-index

添加到没有外观的组件中

将

GridList

和“Hello world”放在

材质ui

提供的同一

框中

容器中，通过使用

Box

容器的道具，您可以将“Hello world”放在中心位置

试试这个

<Box position="relative" >
    <GridList cols={3}>
    {
       this.state.images.map(image => (
          <GridListTile
            rows={1}
            ref={this.imageRef}
            key={image.id}
            style={{ padding: 0 }}
          >
            <img src={image.urls.regular} alt={image.alt_description} />
          </GridListTile>
        ))
    }
    </GridList>

    <Box position="absolute" top="50%" align="center" width="100%" zIndex={1}>
        <Typography>Hello World</Typography>
    </Box>

</Box>

{
this.state.images.map（image=>(
))
}
你好，世界

---

我希望这会有帮助

你能添加一个屏幕截图或在线演示来详细解释你的需求吗？@keikai我已经更新了一张图片，并描述了我正在努力实现的目标。@breaktop也许你可以尝试在css中使用

z-index

作为

网格列表

？@breaktop，然后找到一种方法将Hello world文本集中在中心…@DonaldWu我试着在组件上添加z索引，但没有看到任何东西