在 React native 中为图像创建半白背景（样式问题）

Question

我的图片中的文字显示出来了，但由于图片颜色太深，难以阅读。为了解决文字颜色（必须是黑色）的问题，我想到了将图像白化。你有什么解决办法？我想我必须马上插入一些东西 && 但不确定是什么。

这是我的代码：

          const [show, setShow] = useState(false);

   ...

          <View
            style={{
              flex: 7.5,
              justifyContent: "center",
            }}
          >
            <div
              onMouseEnter={() => {
                setShow(true);
              }}
              onMouseLeave={() => setShow(false)}
            >
              {show && (
                <Text
                  style={{
                    zIndex: 15,
                    fontSize: 20,
                    fontWeight: "600",
                    color: "black",
                    position: "absolute",
                    top: 50,
                    right: 250,
                  }}
                >
                  SENSE
                </Text>
              )}
              {show && (
                <Text
                  style={{
                    zIndex: 15,
                    fontSize: 20,
                    fontWeight: "400",
                    color: "black",
                    position: "absolute",
                    top: 100,
                    right: 200,
                    width: 200,
                  }}
                >
                  The small investment research platform
                </Text>
              )}
              <Image
                source={screen2}
                style={{
                  width: "80%",
                  height: "80%",
                  marginBottom: 258,
                  marginTop: 12,
                  marginLeft: "-10%",
                }}
              />
            </div>
          </View>

Answer 1

您需要创建 2 个新东西：{!show && (

Answer 2

您可以降低图像的不透明度或为其添加滤镜。您可以在此处阅读更多相关信息 https://developer.mozilla.org/en-US/docs/Web/CSS/filter祝您好运！