用“反应本地人”使图像变暗

Question

在“反应本地人”中使图像变暗。

我想要的：，我想让我的图像看起来更暗，我不想用photoshop或者其他类似的方法来做。

到目前为止，Research：一些建议是使用backgroundColor："rgba(0,0,0,0.5)"，但这不起作用，因为我没有使用ImageBackground。我也看到了使用的不透明道具，但这对我的场景不起作用。

我得到的最接近的是tintColor，但是我不能用道具来改变它的不透明度，而且RGBA也不起作用。

图片：(我想让我的白色文本弹出更多！)

​

​

小代码片段：

{/*图像*/} {item.name}

Answer 1

您可以减少图像的不透明度，并将其包装在一个黑色的容器中。

这不是黑暗的照片编辑经理，在那里，你会保持明亮的白色。这是淡淡的黑色。

​

div {
  display: inline-block;
  background: black;
}

img {
  opacity: .6
}

<div>
 <img src="https://www.placecage.com/320/200"/>
</div>

​

Answer 2

我建议尝试应用CSS筛选规则。我认为亮度是你想要的。我知道有些CSS规则在React上的支持有限--虽然是本地的。

​

img.darker {
  filter: brightness(50%);
}

<img src="https://picsum.photos/200/300"/>
<img class="darker" src="https://picsum.photos/200/300"/>

​

这里有一个世博小吃，但是是的，在本机方面似乎工作得不太好，所以您可能需要使用覆盖或类似的方法。