Bootstrap 和 CSS - 输入按钮背景图片（图标大小）答案

【问题标题】：Bootstrap & CSS - Input button background image(icon size)Bootstrap 和 CSS - 输入按钮背景图片（图标大小）
【发布时间】：2017-03-07 14:34:27
【问题描述】：

我有一个带有两个输入框和一个按钮的登录屏幕。我想在每个中放置一个背景图标。为此，我使用 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>

截图：

你能帮帮我吗？

【问题讨论】：

你能解释一下“我的尺寸有很多问题”吗？
@Mistalis 图片很大。我尝试了不同的选项，但它不起作用。我已经编辑了我的问题。
可以在css中设置图片尺寸{background-size:}
如果您使用的是 Bootstrap，您可能会对 this solution 感兴趣，因为您可以在 input-group 中使用自定义图像作为 Bootstrap 字形图标。

标签： html css twitter-bootstrap

【解决方案1】：

background-size: contain也许...

【讨论】：

完美！背景尺寸：包含 !important;