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

Question

我使用图像作为图标而不是很棒的字体。我正在尝试使用 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">

当我尝试为 class 名称添加宽度时，它缩小了整个输入框而不是图像。

请让我知道我做错了什么。

Answer 1

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

请注意，使用复合属性背景，很多东西都会设置为默认值，包括大小。单独列出您感兴趣的每个设置可能会更清楚，因此您可以将背景属性设置替换为：

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

background-image: url(your url);

background-position: x y; /* 如果你想把它放在不同于默认的位置 */

background-repeat: no-repeat no-repeat; /* 默认是重复。您可以分别为每个方向设置重复 */

Answer 2

the background property 的格式如下：

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">

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

How to decrease or increase the width of image (icon) from css for a text box

html

css

background-image