javascript - 将包含图像的 Material UI GridList 制作为背景

Question

我有一个 GridList，其中包含我从外部服务检索的一堆图像。这用于创建图像库。这些图像会定期更新，因此图像库每次看起来都不同。

如何将图片库变成灰度甚至透明，然后将其用作背景，以便我可以将内容放在图片库的顶部？我希望能够将文本框、图像放在图像库的顶部。

这就是我目前所拥有的

<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>

这就是我现在的用户界面:

我的问题在于 Hello World 文本。正如您从图像中看到的，它位于左下角。我想将该文本放在中心，并将图像的 GridList 转换为透明或灰度的背景。

我的最终目标是能够在图像的 GridList 之上添加其他 Material UI 组件。本质上，我希望图像的 GrdList 作为背景，以便我可以将其他内容放置在其顶部。

我尝试将 z-index 添加到不带外观的组件

Answer 1

将 GridList 和“Hello world”保留在 material-ui 提供的同一个 Box 容器中，并使用 Box 容器的 props 可以将“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>

希望对你有帮助