Css Chrome自动填充删除输入背景

我正在使用一些登录/重置密码/确认密码表单，我需要自动填充，以避免删除输入字段上的背景图像。我使用这段代码使背景透明，但是有办法保存当前图像吗

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #fff !important;
}

我的输入字段：

input {
 width: 425px;
 height: 40px;
 margin-bottom: 30px;
 line-height: 40px;
 border: 0;
 border-bottom: 1px solid #393939;
 outline: none;
 color: #fff;

 &.ng-invalid.ng-dirty.ng-touched,
 &.ng-invalid.ng-touched{
 border-bottom: 1px solid red;
 }
 &.password{
 background: url('../../assets/img/password.png') no-repeat;
 }
 &.email{
 background: url('../../assets/img/mail.png') no-repeat;
 }
}

---

提前感谢。

由于声誉不佳，我无法发表评论，因此我发布了一个答案：

我认为应该这样做： （您不需要使用

背景色

来更改淡黄色背景。您可以使用

框阴影

）

要更改文本颜色，请使用：

-webkit-text-fill-color: green !important;

或者，如果您根本不想自动填充，可以在HTML中设置：

<form autocomplete="off">...</form>

。。。

在对web进行研究后，我没有找到一个单一的解决方案使其透明，我自己尝试了一下，并使用一个动画（向前）达到了预期的效果，效果很好。正向动画的权重大于重要属性或本地属性，因此我们可以强制背景透明。（您也可以使用-webkit text-fill-color更改文本颜色）

然后在您的例子中，您只需要将输入字段包装到另一个包含背景图像的div中，考虑到它现在是透明的，您将看到自动填充输入后面的图像

---

希望能有帮助

不是这样，它只是设置了背景，我需要一些完全透明的东西，这样我的背景图像就可以保持原样。谢谢你的努力，所以最简单的解决办法就是禁用自动完成。

<form autocomplete="off">...</form>

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    /* -webkit-text-fill-color: black; */ /* You can change text color here */
    animation: input_background_autofill 0s forwards;
}
@keyframes input_background_autofill {
    100% { background-color: transparent }
}