html - 如何使用背景图像向此输入重新添加背景颜色？

Question

http://codepen.io/leongaban/pen/IFvEx

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

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: white; 行时，我丢失了背景图像。 background-image 在这种情况下也不起作用。

Answer 1

只需使用 background-color 而不是仅使用 background。

发生这种情况的原因是因为图像是通过 background 属性添加的，并且被颜色覆盖了。通过更具体并添加 background-color，它不会覆盖图像。

Updated Codepen here - it works.

更新的 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;