CSS技巧：如何在不影响背景色的前提下改变输入框PNG图标颜色

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

<div class="input-wrapper">
  <svg class="username-icon" viewBox="0 0 24 24">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
  </svg>
  <input type="text" placeholder="User Name" class="username-input" />
</div>

.input-wrapper {
  position: relative;
  display: inline-flex; /* 或其他布局方式 */
  align-items: center;
}

.username-icon {
  position: absolute;
  left: 5px; /* 定位图标 */
  width: 20px;
  height: 20px;
  fill: white; /* 直接改变SVG图标的颜色 */
}

.username-input {
  padding-left: 30px; /* 为图标留出空间 */
  background-color: #f0f0f0; /* 输入框本身的背景色 */
  border: 1px solid #ccc;
  /* ... 其他样式 */
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>

.username-input {
  /* 输入框本身的背景色 */
  background-color: #f0f0f0;
  border: none;
  padding: 9px 20px 0px 20px;
  max-width: 440px;

  /* 设置图标的颜色 */
  color: white; /* 这会通过currentColor改变SVG背景图的颜色 */

  /* SVG背景图样式 */
  background-image: url(UserName.svg);
  background-repeat: no-repeat;
  background-position: -5px 8px; /* 调整位置 */
  background-size: 25px;
}

<div class="input-field-wrapper">
  <input
    id={"userName"}
    name={"userName"}
    component={"FormInput"}
    placeholder="User Name"
    className="username-input"
    style={{
      // 这里的style可以移到CSS类中
      // background-image: "url(UserName.png)", // 不再需要直接设置背景图
      backgroundRepeat: "no-repeat",
      backgroundPosition: "-5px 8px",
      padding: "9px 20px 0px 20px",
      backgroundSize: "25px",
      borderTop: "none",
      borderLeft: "none",
      borderRight: "none",
      maxWidth: "440px",
      backgroundColor: "#f0f0f0" // 示例：输入框本身的背景色
    }}
  />
</div>

.input-field-wrapper {
  position: relative; /* 为伪元素提供定位上下文 */
  display: inline-block; /* 或其他适合的布局 */
}

.username-input {
  /* 保持输入框原有样式 */
  background-color: #f0f0f0; /* 输入框本身的背景色，保持不变 */
  border-top: none;
  border-left: none;
  border-right: none;
  max-width: 440px;
  padding: 9px 20px 0px 40px; /* 为伪元素图标留出更多左侧内边距 */
  /* ... 其他输入框样式 */
}

.username-input::before {
  content: '';
  position: absolute;
  left: 10px; /* 图标的X轴位置 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 25px; /* 图标的宽度 */
  height: 25px; /* 图标的高度 */

  /* 应用遮罩和颜色 */
  -webkit-mask-image: url(UserName.png); /* 使用你的PNG图标作为遮罩 */
  mask-image: url(UserName.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center; /* 遮罩图片居中 */
  mask-position: center;
  -webkit-mask-size: contain; /* 确保图标完整显示在指定宽高内 */
  mask-size: contain;

  background-color: white; /* 你想要的图标颜色 */
}