时间戳

首页 > 解决方案 > 将包含图像的 Material UI GridList 制作为背景

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

问题描述

我有一个 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不看就添加到组件中

标签： javascriptcssreactjsmaterial-ui

解决方案

将两者GridList和“Hello World”保存在Box由 提供的同一个容器中material-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>

我希望它有帮助

推荐阅读