Benutzerdefinierte Eingabe Textfeld

Question

Ich versuche, mehrere Hintergrundbilder verwenden, um ein Eingabefeld anpassen, aber aus irgendeinem Grund funktioniert das Hintergrundbild nicht.

Was ich versuche, dies zu erreichen:

Die mehreren Hintergrundbilder sind:

• 
• 

Jede Hilfe ist sehr geschätzt .

.login-block input#username { 
 
    background: #2b2e30 url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat, url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') left 10px no-repeat; 
 
    background-size: 100% 41px; 
 
    background-position: left top; 
 
} 
 
.login-block input { 
 
    border: medium none; 
 
    box-sizing: border-box; 
 
    color: #9c9b9b; 
 
    display: block; 
 
    font-size: 14px; 
 
    height: 41px !important; 
 
    margin-bottom: 20px; 
 
    padding: 0 20px 0 50px; 
 
    width: 100%; 
 
}

<div class="login-block"> 
 
    <input value="" placeholder="Username" id="username" type="text"> 
 
</div>

Answer 1

Zeigen Sie das Symbol zuerst, dann die bg und dann den Hex-Hintergrund

.login-block input#username { 
 
    background:url('https://s29.postimg.org/qdrqvmr0n/user_login_icon.png') 41px 41px no-repeat,url('https://s27.postimg.org/izumvqjr7/login_input_bg.jpg') 100% 41px no-repeat,#2b2e30; 
 
    background-position:10px center, left center; 
 
} 
 

 
.login-block input { 
 
    border: medium none; 
 
    box-sizing: border-box; 
 
    color: #9c9b9b; 
 
    display: block; 
 
    font-size: 14px; 
 
    height: 41px !important; 
 
    margin-bottom: 20px; 
 
    padding: 0 20px 0 50px; 
 
    width: 100%; 
 
}

<div class="login-block"> 
 
    <input value="" placeholder="Username" id="username" type="text"> 
 
</div>