如何使用css仅更改登录屏幕中的图像颜色

Question

我有一个用户名和密码输入字段，屏幕截图中有PNG图像图标。我想更改用户名或密码PNG图像的颜色。我的要求是将图像的颜色改为白色而不是黑色(转换图像颜色(。如何使用CSS实现。我已经尝试了下面的CSS。但它正在改变用户名或密码输入框的整个背景颜色。我不想更改输入字段的背景颜色。输入字段的背景颜色应与屏幕截图中显示的颜色相同。

filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);

这是我的用户名字段代码，如下所示。我正在使用反应应用

<Field
id={"userName"}
name={"userName"}              
component={FormInput}            
placeholder="User Name"      
style={{
backgroundImage: "url(UserName.png)",
backgroundRepeat: "no-repeat",
backgroundPosition: "-5px 8px",
padding: "9px 20px 0px 20px",
backgroundSize: "25px",                
borderTop: "none",
borderLeft: "none",
borderRight: "none",
maxWidth: "440px",
}}              
/>

登录页面

Answer 1

使用photoshop或免费的替代图像编辑器简单地更改png的颜色可能会更容易