引導和CSS - 輸入按鈕背景圖像（圖標大小）

我有一個登錄屏幕有兩個輸入框和一個按鈕。我想在每個中放置一個背景圖標。爲此，我使用CSS樣式。引導和CSS - 輸入按鈕背景圖像（圖標大小）

現在我在輸入框中有一個背景圖像，但我有一個大小問題，它是非常大的輸入框。

代碼：

.btn { 
    /*font-family: Gotham-Medium; Si activem no surten les icones */ 
    padding: 3px 6px; 
    -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
      transition: all 0.3s; 
    background-color: #636363; 
    color: #fff; 
    border-radius: 0; 
    border-color: #fff; 
    font-size: large; 
} 
.btn-group { 
    font-family: Gotham-Medium; 
} 
.pull-left { 
    padding-right: 5px;   /* Distancia separación entre botones toolbar. */ 
} 
.btn-addcom{ 
    background-color: #009fe3; 
    font-size: medium !important; 
    font-family: Gotham-Medium !important; 
} 
.img-logo-login { 
    width: 223px; 
    height: 194px; 
} 

/* LOGIN */ 

.login-user{ 
    width: 223px; 
    text-align: center; 
    background: url('../../assets/images/login-user-black.png') no-repeat scroll 2px 2px; 
    padding-left: 30px; 
} 
.login-pass{ 
    width: 223px; 
    text-align: center; 
    background: url('../../assets/images/login-pass-black.png') no-repeat scroll 3px 3px; 
    padding-left: 30px;  
} 
.login-button{ 
    padding: 3px 6px; 
    width: 223px; 
    text-align: center; 
    background-image: url('../../assets/images/login.png') no-repeat scroll 3px 3px; 
    padding-left: 30px;   
} 

input{ 
    padding: 3px 6px; 
    font-family: Gotham-Medium; 
    background-color: #fff !important; 
    color: #636363 !important; 
    border: 0 !important; 
    border-bottom: 2px solid #dddddd !important; 
} 

/* FOOTER */ 

footer { 
    position: fixed; 
    height: 75px; 
    bottom: 0; 
    width: 100%; 
} 

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12 text-center"> 
       <img class="img-logo-login" src="assets/images/Logo ADDcloud300-2.jpg"/> 
      </div> 
     </div> 

     <form action="connect_start.php" method="post"> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <input type="text" class="login-user" placeholder="USUARI" name="username" required autofocus> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <input type="password" class="login-pass" placeholder="PASSWORD" name="password" required> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <button class="btn btn-addcom login-button" type="submit" style="width: 223px;">LOGIN</button> 
       </div> 
      </div>    
     </form>

截圖：

你能幫助我嗎？

來源

2016-10-25 ruzD

你能解釋一下「**我有很多大小問題**」嗎？ – Mistalis

@Mistalis形象非常大。我嘗試了不同的選項，但它不起作用。我編輯了我的問題。 – ruzD

您可以在css中設置圖像大小{background-size：} –

background-size: contain也許......

來源

2016-10-25 13:50:57

完美！ background-size：包含！important; – ruzD

引導和CSS - 輸入按鈕背景圖像（圖標大小）

回答

相關問題