[分享]css3文本框图片大小

在前端开发中，我们经常需要设置文本框或输入框的背景图片，并且需要设置图片的大小以达到所需的效果。在CSS3中，可以使用backgroundsize属性来设置背景图片的大小。< pre>i...

在前端开发中，我们经常需要设置文本框或输入框的背景图片，并且需要设置图片的大小以达到所需的效果。在CSS3中，可以使用background-size属性来设置背景图片的大小。

< pre>input{ background-image:url("image.jpg"); background-repeat:no-repeat; background-size: 100px 100px; } < /pre>

在上面的代码中，我们使用了background-image来设置输入框的背景图片为image.jpg，使用background-repeat来设置图片不重复显示，而使用background-size来设置图片的大小为100px×100px。

如果想设置图片等比例缩放，可以只写一个参数，如下：

< pre>input{ background-image:url("image.jpg"); background-repeat:no-repeat; background-size: 50%; } < /pre>

上述代码将图片的大小设置为输入框的50%，同时保持了图片的原始比例。如果要将图片铺满整个文本框，可以使用cover参数：

< pre>input{ background-image:url("image.jpg"); background-repeat:no-repeat; background-size: cover; } < /pre>

上述代码将图片等比缩放，以充满整个文本框。如果想要图片全部显示，但不保持其原始比例，可以使用contain参数：

input{
  background-image:url("image.jpg");
  background-repeat:no-repeat;
  background-size: contain;
} < /pre>
上述代码将使图片在完全显示的情况下，完全包含在文本框中。
总的来说，使用CSS3可以轻松设置文本框的背景图片大小，以获得美观的效果。