如何减少或增加文本框的css图像(图标)的宽度

Question

我使用图像作为图标，而不是字体awesome。我正在尝试使用css来减小图像的大小。

下面是我的代码:

.sign_up_name {
background: url(../images/name.png) no-repeat scroll 11px 13px #f2f2f2 !important;
}

<input type="text" class="form_control_field form-control-sign sign_up_name" placeholder="Name">

当我试图增加宽度类名它减少了整个输入框而不是图像。

请告诉我哪里做错了。

Answer 1

你需要为背景设置一个大小，而不是为整个元素设置。

请注意，使用复合属性background时，很多东西都被设置为默认值，包括大小。单独列出你感兴趣的每个设置可能会更清楚，这样你就可以用

替换背景属性设置:background-size: 20px;/*这将设置宽度和高度将自动。还有其他可能有用的设置，包含和覆盖。取决于你想要什么。设置auto 100%会设置高度，例如*/

background-image: url(your url);

background-position: x y;/*如果你想把它和默认的*/

放在不同的位置background-repeat: no-repeat no-repeat;/*默认为重复设置。您可以单独设置每个方向的重复*/

Answer 2

background属性的格式如下:

background-image || background-position [/background-size]?|| background-repeat || background-attachment || background-origin || background-clip || background-color

为了控制结果，我们必须同时设置background-position和background-size，并在它们之间使用斜杠。例如:

.sign_up_name {
background: url(https://i.stack.imgur.com/KYmPL.png) 3px center / 11px 13px no-repeat #f2f2f2;
padding-left: 18px;  /* prevent text from overlapping the background image */
}

<input type="text" class="form_control_field form-control-sign sign_up_name" placeholder="Name">