Html 如何使用背景图像将背景色重新添加到此输入？

我有一个基本的输入，里面有一个背景图像。然而，一旦添加了背景图像，我就失去了输入的白色背景色

body {
    background: #333;
}

input {
    padding: 0 40px;
    width: 80%;
    height: 50px;
    font-family: Arial;
    font-size: 24px;
    border: 0px;
    color: #fff;
    background: white;
}

#login-email{
    border-bottom: 1px solid #f7f7f7;
    background: url('http://leongaban.com/_codepen/ico_email_input.png') no-repeat left center;
    //background: white;
}

---

当我取消注释

背景时：白色行，我丢失了背景图像<代码>背景图像

在这种情况下也不起作用。

只需使用<代码>背景颜色，而不是只使用<代码>背景

发生这种情况的原因是，图像是通过

background

属性添加的，并且被颜色覆盖。通过更加具体并添加

背景色

，它不会覆盖图像

更新的CSS

#login-email{
    border-bottom: 1px solid #f7f7f7;
    background: url('http://leongaban.com/_codepen/ico_email_input.png') no-repeat left center;
    background-color: white;
    color:black;
}

如下面的评论所述，您也可以使用速记属性作为背景：

background: white url('http://leongaban.com/_codepen/ico_email_input.png') no-repeat left center;

---

另外

背景：白色url（'http://leongaban.com/_codepen/ico_email_input.png’）左中无重复@Marcoravadeneyra是的！这也行，它是一个很好的速记属性。