1

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在这种情况下也不起作用。

4

1 回答 1

2

简单地使用background-color而不是background.

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

在这里更新了 Codepen - 它有效。

更新的 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;
于 2013-10-18T22:01:47.187 回答