更改背景图像的默认大小

Question

我的css文件中有：

input.myInput {
background-image:url ('search.png');
background-size:120px 120px;
}

html文件也是：

<input type='text' class='myInput' >

如何更改背景图片尺寸？

Answer 1

您的第一个属性设置了图片网址，因此它应为background-image，而不是background-size。

input.myInput {
    background-image:url('search.png');
    background-size:120px 120px;
}

要增加图像尺寸，请将background-size像素单位更改为其他尺寸。例如，background-size:60px 60px;。

要保持100％的容器，请将其设置为

background-size: 100%;

或

background-size: contain;

Answer 2

This works 100%. Check the Codepen link here.

CSS

.myInput {
  background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-21.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}