在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}
/>