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 に答える