在 ReactJS 组件中将图像转换为灰度或透明

Question

我有一张我想用作背景的图像。在将其用作背景之前，我想将图像转换为灰度，甚至在 ReactJS 中使其透明。我如何在 ReactJS 中做到这一点。

我的代码现在看起来像这样：

        <GridListTile>

          <img

            style={{ -webkit-filter: grayscale(100%) }}

            src={image.urls.regular}

            alt={image.alt_description}

          />

        </GridListTile>

我试过使用-webkit-filter: grayscale(100%)但filter没有运气。

Answer 1

您需要改为添加style={{ filter: "grayscale(100%)" }}。这是一个代码框： https ://codesandbox.io/s/confident-sea-bhi6d<img&nbsp; style={{ filter: "grayscale(100%)" }}&nbsp; src={image.urls.regular}&nbsp; alt={image.alt_description}/>