在 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

  style={{ filter: "grayscale(100%)" }}

  src={image.urls.regular}

  alt={image.alt_description}

/>