background-position

 1 <style type="text/css">
 2 input{
 3     width:197px;
 4     height:20px;
 5     margin-top:7px;
 6     border:1px solid #000;
 7     background-repeat:no-repeat;
 8     padding-left:20px;
 9     background-position:2px 4px;
10     
11 }
12 .username{
13     background-image:url(1.png);
14 }
15 
16 .password{
17     background-image:url(2.png);
18 }
19 </style>
20 </head>
21 
22 <body>
23     
24     <input type="text" class="username"/>
25     <br/>
26     <input type="password" class="password"/>
27 </body>
28 </html>

 使用background-position之后，就不必要切割图片了，可以将所有图标都放在一张图片下，这样就加快了网页的打开速度！

版权声明：本文为he1229原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/he1229/archive/2012/07/29/2613950.html